Disclaimer: I'd like to point out that I am a bit new to jQuery with no javascript experience (other than very basic general concepts of it), so for the techies out there if you bother to answer, please keep that in mind when replying. (i.e. be specific). Alright onto the goods.. so I've been puzzled with this code I've put together for the longest. I am assuming that the issue has something to do with the parent/sibling/child relationship between h3 and p. Here's all the coding.. <style type="text/css"> .container{width:400px;} .container p {font-family:arial; font-size:10pt; color:gray; font-weight:strong; line-height:10.5pt;} .container h3 {font-family:arial black; text-transform:uppercase; color:black; letter-spacing:2px; } .active { color:red;} </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $(".container p").hide(); $(".container h3").click(function(){ $(this).closest("p").slideToggle("slow"); }); }); </script> </head> <body> <div class="container"> <h3>Data Center Test</h3><br/> <p>Nisl risus eros, taciti, tortor nisl iaculis quam augue Fusce dictum posuere ut cras, odio ut. Nascetur dis. Volutpat magna aliquet auctor tellus facilisis arcu platea suspendisse auctor. Senectus cras dis. Maecenas urna. At lectus. Justo tortor quis nullam arcu. Euismod pretium commodo platea. Pede molestie faucibus euismod dui nascetur mauris condimentum tempor. Faucibus curae; elit justo nunc pellentesque id eget hendrerit vestibulum. Non ullamcorper dapibus posuere ipsum gravida tortor nibh litora pulvinar id vitae faucibus ligula dignissim dictum quis placerat velit praesent lectus eget luctus ullamcorper quisque potenti velit, fringilla eleifend montes, dis penatibus aenean molestie fringilla dolor pellentesque. </p> <h3>Main</h3><br/> <p>Nisl risus eros, taciti, tortor nisl iaculis quam augue Fusce dictum posuere ut cras, odio ut. Nascetur dis. Volutpat magna aliquet auctor tellus facilisis arcu platea suspendisse auctor. Senectus cras dis. Maecenas urna. At lectus. Justo tortor quis nullam arcu. Euismod pretium commodo platea. Pede molestie faucibus euismod dui nascetur mauris condimentum tempor. Faucibus curae; elit justo nunc pellentesque id eget hendrerit vestibulum. Non ullamcorper dapibus posuere ipsum gravida tortor nibh litora pulvinar id vitae faucibus ligula dignissim dictum quis placerat velit praesent lectus eget luctus ullamcorper quisque potenti velit, fringilla eleifend montes, dis penatibus aenean molestie fringilla dolor pellentesque. </p> </div> </body> Code (markup): You are supposed to be able to click on a heading, and the "closest" paragraph element should slide down.
From the specs: the .closest() method searches through these elements and their ancestors in the DOM tree and constructs a new jQuery object from the matching elements. You should go with next(), remove the <br> it is not necessary $(this).next("p").slideToggle("slow");
Thanks artus.. I actually had found that out after I posted. The <br/> is there because I have additional info I hadn't added yet directly under that line. Anyway, if I wanted to add something else.. like an unnumbered list after the paragraph, how would I go about ensuring that this ul is anchored to its specific paragraph and toggles correctly? I've tried a series of tests such as... $(this).next("p,ul").slideToggle("slow"); $(this).next("p + ul").slideToggle("slow"); $(this).next("p").add("ul").slideToggle("slow"); (which actually toggled the ul with the p, but unfortunately the ul showed with every heading).
Instead of combining multiple elements for sliding it will be easier to wrap them around a container and slide that container instead. For e.g I can have a div named "wrapper" and keep all the contents inside it and slide the wrapper $(this).next(".wrapper").slideToggle("slow"); <div class="wrapper"> <p>Paragraph contents goes here.</p> <ul> <li>n numbers of un-ordered list</li </u> <span>Oh Hello, you saw me ;) </span> </div> HTML: