Question

I’m using the code below to replace a minimize icon to an expand icon when clicked.

$(document).ready(function(){
  $("#expand").click(function(){
    $(".expandicon").hide();
    $(".shrinkicon").show();
  });
  $("#shrink").click(function(){
    $(".expandicon").show();
    $(".shrinkicon").hide();
  });
});

The only problem is I can only use it once (first instance then the second icon doesn’t change and so on). All in all, I would have to use it 5 times as I have 5 tables in a single page. Any idea how to do it? I’m fairly new with web development, not to mention jQuery. Any help would be greatly appreciated. Thanks in advance!

[EDIT] Here is my HTML code:

<span class="expandicon" style="display:none;">
  <a class="flip">
    <img id="expand" src="img/expand1.png" />
  </a>
</span>
<span class="shrinkicon">
  <a class="flip">
    <img id="shrink" src="img/shrink1.png" />
  </a>
</span>

* will replace id’s with classes instead. my bad on that one.

Answer 1

With

$(".expandicon").hide();

you hide all elements in the page with class=’expandicon’

and with

$(".shrinkicon").show();

all elements with class=’shrinkicon’ are shown.

Have a look in selectors.

For your case, try this:

HTML:

<span class="expandicon" style="display:none;"> expand 1 </span>
<span class="shrinkicon"> shrink 1 </span>
<br/>
<span class="expandicon" style="display:none;"> expand 2 </span>
<span class="shrinkicon"> shrink 2</span>

JS:

$(function(){
    $('span.expandicon').click(function(){
        $(this).toggle().next('span.shrinkicon').toggle();    
    });
    $('span.shrinkicon').click(function(){
        $(this).toggle().prev('span.expandicon').toggle();        
    });
});

You can test it here