slideToggle reveals <a> link, don't want it to close when user clicks the link.
I'm a little stumped by this one, I've got a slideToggle setup that works with a "more info" kind of thing on a products page. The problems is, one of the elements slideToggle is revealing contains a link that opens up a video modal box, and when the user clicks on the video modal link, the slideToggle activates and closes the "more info" section. I'd like to keep it so that the user can click anywhere in the productInfoContainer div to open/close the more info section, I just don't want it to close when they click the modal box. Is it possible to exclude a child element from the parent element selection?
Here's the jQuery code I've got:
- $(document).ready(function() {
- $('div.productInfoContainer').click(function() {
- $(this).children('div.productInfo').slideToggle();
- if ($(this).children('a.moreInfo').text() == "Show More") {
- $(this).children('a.moreInfo').html("Show Less");
- } else {
- $(this).children('a.moreInfo').html("Show More");
- }
- });
- });
And here's one of the product info divs:
- <div class="productInfoContainer">
- <h3>Title</h3>
-
- Some product info
-
- <div class="productInfo" style="display:none;">
- <a class="videoOverlay" href="etc etc"><img src="thumbnail" /></a>
- </div>
-
- <br />
-
- <a class="moreInfo" href="#">Show More</a>
- </div>