How to specify only the preceeding element in a class?
Hello,
I've got a script that collapses div.collapsible when p.more_button is clicked.
However, my script currently collapses ANY div.collapsible when ANY p.more_button is clicked. I'd like to change this so that when p.more_button is clicked, only the immediately preceding div.collapsible collapses.
I've gone through the jQuery documentation and tried a variety of "traversing" terms, but I cannot seem to get any to create the desired effect. Can anyone help?
Here is a copy of the current code:
-
<script type="text/javascript" src="/clients/oracdecorcatalog.com/js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="/clients/oracdecorcatalog.com/js/jquery-ui-1.6.custom.js"></script>
<script language="javascript">
$(function() {
$(".collapsible").css({ "height" : "60px" , "overflow" : "hidden" });
$(".more_button").click(function () {
$(".collapsible").animate( {"height" : "420px" }, 1000);
});
});
</script>
Here is some sample HTML:
-
<div class="collapsible">
<p>Hello World!</p>
<p> Goodbye Cruel World!</p>
</div>
<p class="more_p"><a href="#" class="more_button">More Info</a></p>
<div class="collapsible">
<p>Hello World!</p>
<p> Goodbye Cruel World!</p>
</div>
<p class="more_p"><a href="#" class="more_button">More Info</a></p>
Any help would be appreciated! Thanks!