ansaurus

Question

jQuery - Show/Hide items individually with same class name

Answer 1

A:

i'm not sure i understand you. but $('#linkOne .hide'), for example, will select only elements with class 'hide' which are children of #linkOne

valya 2009-09-26 11:56:38

Answer 2

A:

Try adding another id of the links div to the span you want to open:

change div1 to div1

Then add the jQuery magic:

$(function(){
    // First hide all hide links initially.
    $(".hide").hide();

    // then attach hide handler
    $(".hide").bind("click", function(){
        $(this).siblings(".show").show();
        $(this).hide();
        $(".myDiv." + $(this).attr("id")).show();
    });

    // and the show handler
    $(".show").bind("click", function(){
        $(this).siblings(".hide").show();
        $(this).hide();
        $(".myDiv." + $(this).attr("id")).hide();
    });
});

HTH Alex

AlexDuggleby 2009-09-26 11:59:40

Wow...thanks a lot Alex. That did the trick!

Scott 2009-09-26 12:04:45

Answer 3

+2 A:

Is this what you want?

UPDATED Now shows show links initially and toggles accordingly, also toggles content (.myDiv) accordingly.

<script type="text/javascript">
   $(document).ready(function(){
      $('.myDiv').hide();
      $('.hide').hide();

      $('.show').click(function() {
         $(this).hide();
         $('.hide:eq(' + $('a.show').index(this) + ')').show();
         $('.myDiv:eq(' + $('a.show').index(this) + ')').show();
      });

      $('.hide').click(function() {
         $(this).hide();
         $('.show:eq(' + $('a.hide').index(this) + ')').show();
         $('.myDiv:eq(' + $('a.hide').index(this) + ')').hide();
      });
   });
</script>

Sbm007 2009-09-26 12:09:42

Ok, but you need to handle showing/hiding the links as well.

tvanfosson 2009-09-26 12:18:48

Updated to include that

Sbm007 2009-09-26 12:25:40

Answer 4

A:

Hi

A simple solution would be:

$(".show").each(function(i){
    $(this).attr({class : "show" + i});
    $(this).bind("click", function(e){
        $(".myDiv" + i).show();
    });
});

Juri Glass 2009-09-26 12:09:55

Answer 5

+1 A:

As long as your links are in the same order as your spans, you should be able to get by without any special "magic" with the class names:

<style type="text/css">
...note change below...
.link { background: #ccc; display: inline-block;     float: left; margin-right: 20px; }
</style>

Use the order of the link to select the correct span from the wrapper.

$(document).ready(function(){

  $('#wrap span').hide();

  $(".show").click( function() {
       var index = $('.show').index(this);
       $('#wrap span').eq(index).show();
       $(this).hide();
       $(this).siblings('.hide').show();
  });

  $(".hide").click(function(){
       var index = $('.hide').index(this);
       $('#wrap span').eq(index).hide();
       $(this).hide();
       $(this).siblings('.show').show();
  });

 });

Note change to link class instead of named divs.

<div class="link">
  <a class="show" href="#">Show1</a>
  <a class="hide" href="#">Hide1</a>
</div>
<div class="link">
  <a class="show" href="#">Show2</a>
  <a class="hide" href="#">Hide2</a>
</div>
<div class="link">
  <a class="show" href="#">Show3</a>
  <a class="hide" href="#">Hide3</a>
</div>

div1 div2 div3

tvanfosson 2009-09-26 12:17:46

ansaurus

tags:

views:

answers:

jQuery - Show/Hide items individually with same class name

related questions