Selector help (selecting certain next named element)
Hi All,
Could someone help me with the following selector issue:
Here's a sample of my html:
-
<div class="toolHeading">
<span class="toolName">Sample Tool Name</span><span class="toolType">Screenshot</span><span class="toolDownload"><a href="#">View Screenshot </a></span>
</div>
<div class="ToolDescription">
<p>Ipsum Lorem...</p>
</div>
When this html is displayed it renders the three spans within '.toolheading' on a single line and the following div (.ToolDescription) is hidden by default. I want the user to click the '.toolName' span to toggle the visibility of the '.ToolDescription' div.
I've got the the following code to initialize the click (duh), but don't know how to select 'the next' occurence of '.ToolDescription' within the page (as I'll have many '.toolName' and '.ToolDescription' elements within the page but just want to target the first one following whichever '.toolName' is clicked.
$(".toolName").click(function() {
<!-- select the next occuring .ToolDescription div and toggle it -->
});
Sorry to be longwinded. Thanks in advance for any help!