html - Multiple jQuery slidetoggles overlapping -


so new jquery , have found couple examples of slidetoggle of them overlapping. here code far:

jquery:

<script src="jquery-1.9.1.js"> </script> <script>     $ (document).ready(function(){         $("#about").click(function(){     $("#aboutp").slidetoggle("medium");   }); });  </script> <script>     $(document).ready(function () {         $("#discounts").click(function () {             $("#discountsp").slidetoggle("medium");          });     });  </script> <script>     $ (document).ready(function(){         $("#news").click(function(){     $("#newsp").slidetoggle("medium");    }); });  </script>

html:

<div id="about">about us</div>         <div id="aboutp">this guys</div>         <div id="discounts">discounts</div>         <div id="discountsp">dicounts...blah blah blah blah blah</div>         <div id="news">news</div>         <div id="newsp">here news!!</div>

(the p @ end of about, discounts, , news information or paragraph divs hidden , shown when others clicked)

css:

#about,#discounts,#news {     position: fixed;     top: 100px;     background-color:lightblue;     z-index: 11;  } #about {     right: 10px;     padding-left: 50px;     padding-right: 50px;     padding-top: 5px;     padding-bottom: 5px;     text-align: center;  } #discounts {     right: 150px;     padding-left: 50px;     padding-right: 50px;     padding-top: 5px;     padding-bottom: 5px;     text-align: center;  } #news {     right: 300px;     padding-left: 50px;     padding-right: 50px;     padding-top: 5px;     padding-bottom: 5px;     text-align: center; }  #newsp,#discountsp,#aboutp {     top: 300px;     right: 50px;     position: fixed;     display: none; }

see if looking for. can simplify quite lot of code providing classes, 1 click handler sufficient.

html

<div id="about" class="trigger">about us</div> <div id="aboutp" class="content">this bro</div> <div id="discounts" class="trigger">discounts</div> <div id="discountsp" class="content">dicounts...blah blah blah blah blah</div> <div id="news" class="trigger">news</div> <div id="newsp" class="content">here news!!</div>

js

    $(document).ready(function () {       $('.trigger').click(function(){        var p = '#' + this.id + 'p'; //get id +p content's id toggle.         $('.content').not(p).slideup(); //slideup not content.         $(p).slidetoggle('medium'); //toggle display of click element's respective content.       });    });

demo

a cleaner approach provide data-attribute has selector of target.

<div id="about" class="trigger" data-target="#aboutp">about us</div> <div id="aboutp" class="content">this bro</div> <div id="discounts" class="trigger" data-target="#discountsp">discounts</div> <div id="discountsp" class="content">dicounts...blah blah blah blah blah</div> <div id="news" class="trigger" data-target="#newsp">news</div> <div id="newsp" class="content">here news!!</div>   $(document).ready(function () {           $('.trigger').click(function(){             var p = $(this).data('target'); //get selector of target data.             $('.content').not(p).slideup(); //slideup not content.             $(p).slidetoggle('medium'); //toggle display of click element's respective content.           });        });

demo


Comments

Post a Comment

Popular posts from this blog

python - How to create a legend for 3D bar in matplotlib? -

Image
given ax = plt.subplot() : ax.bar()[0] can passed plt.legend() . however, ax.bar3d() returns none . how create legend displayed bars? update: passing legend="stuff" ax.bar3d() , calling ax.legend() raises /usr/lib/python2.6/site-packages/matplotlib/axes.py:4368: userwarning: no labeled objects found. use label='...' kwarg on individual plots. warnings.warn("no labeled objects found. " you need use proxy artist legends not supported. this code: from mpl_toolkits.mplot3d import axes3d import matplotlib.pyplot plt import numpy np fig = plt.figure() ax = fig.add_subplot(111, projection='3d') x, y = np.random.rand(2, 100) * 4 hist, xedges, yedges = np.histogram2d(x, y, bins=4) elements = (len(xedges) - 1) * (len(yedges) - 1) xpos, ypos = np.meshgrid(xedges[:-1]+0.25, yedges[:-1]+0.25) xpos = xpos.flatten() ypos = ypos.flatten() zpos = np.zeros(elements) dx = 0.5 * np.ones_like(zpos) dy = dx.copy() dz = hist.flatten() ax...
Read more

java - Multi-Label Document Classification -

i have database in store data based upon following 3 fields: id, text, {labels}. note each text has been assigned more 1 label \ tag \ class. want build model (weka \ rapidminer \ mahout) able recommend \ classify bunch of labels \ tags \ classes given text. i have heard svm , naive bayes classifier, not sure whether support multi-label classification or not. guides me right direction more welcome! the basic multilabel classification method one-vs.-the-rest (ovr), called binary relevance (br). basic idea take off-the-shelf binary classifier, such naive bayes or svm, create k instances of solve k independent classification problems. in python-like pseudocode: for each class k: learner = svm(settings) # example labels = [class_of(x) == k x in samples] learner.learn(samples, labels) then @ prediction time, run each of binary classifiers on sample , collect labels predict positive. (both training , prediction can done in parallel, since problems assumed ...
Read more

php - Dynamic url re-writing using htaccess -

how can rewrite http://mydomain.com/test/master.php?catid=2&subcatid=8 http://mydomain.com/test/master.php/catname/subcat using .htaccess file. once rewritten, how can access these parameters in master.php? note: untested, let me know if doesn't work. rewriterule ^master.php/([a-za-z0-9_-]+)/([a-za-z0-9_-]+)$ /master.php?catid$1&subcatid=$2 [l]
Read more