Clever Geek Handbook

Open / close icons

I am doing some shennanigans with jQuery to put little plus / minus icons next to my extenders. It looks like windows file trees or firebugs code extensions.

It works, but it's not enough.

Hope this makes sense ...

$('div.toggle').hide();//hide all divs that are part of the expand/collapse
$('ul.product-info li a').toggle(function(event){
  event.preventDefault();
  $(this).next('div').slideToggle(200);//find the next div and sliiiide it
  $('img.expander').attr('src','img/content/info-close.gif');//this is the part thats not specific enough!!!
},function(event) { // opposite here
  event.preventDefault();
  $(this).next('div').slideToggle(200);
  $('img.expander').attr('src','img/content/info-open.gif');
});


<ul class="product-info">
  <li>
    <a class="img-link" href="#"><img class="expander" src="img/content/info-open.gif" alt="Click to exand this section" /> <span>How it compares to the other options</span>
  </a>
  <div class="toggle"><p>Content viewable when expanded!</p></div>
  </li>
</ul>

There are tags on the page $('img.expander')

, but I have to be specific. I tried the following () functionality (for example I used to find the next div) but it says its undefined. How can I find my specific img.expander tag? Thank.

EDIT, updated code as per Douglas solution:

$('div.toggle').hide();
            $('ul.product-info li a').toggle(function(event){
                //$('#faq-copy .answer').hide();
                event.preventDefault();
                $(this).next('div').slideToggle(200);
                $(this).contents('img.expander').attr('src','img/content/info-close.gif');
                //alert('on');
            },function(event) { // same here
                event.preventDefault();
                $(this).next('div').slideToggle(200);
                $(this).contents('img.expander').attr('src','img/content/info-open.gif');
            });
+1


source to share


3 answers 


$(this).contents('img.expander')


Is this what you want. It will select all nodes that are children of your list. In your case, all your images are nested inside the list item, so this will only filter out what you want.

+5


source


How about having your click event toggle the CSS class to the parent (in your case, maybe ul.product-info). Then you can use CSS background properties to change the background image for the <span> instead of using the <img> literal and trying to mess around with src. You will also be able to show and hide in your div.toggle.

ul.product-info.open span.toggler {
   background-image: url( "open-toggler.png" );
}
ul.product-info.closed span.toggler {
   background-image: url( "closed-toggler.png" );
}

ul.product-info.open div.toggle {
   display: block;
}
ul.product-info.closed div.toggle {
   display: hidden;
}


Using jQuery navigation / spidering functions can be slow when the DOM has many elements and is deeply nested. With CSS, your browser will render and change things faster.

+2


source


Have you tried the .siblings () method?

$(this).siblings('img.expander').attr('src','img/content/info-close.gif');
+1


source






More articles:


All Articles