CODEWITHSUNDEEP
jquery
Scott
Scott

Reputation: 823

jQuery - Show/Hide items individually with same class name

I am an extreme noob with jQuery.

I'm trying to show an item based on it's corresponding link...without showing the other items. All my links have the same class name, as well as the spans.

I don't know if this can be done or not...been racking my brain for too long on this one.

Here's the code:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>jQuery - Show/Hide items individually with same class name</title>

<style type="text/css">
* { outline: none; }
a { display: inline-block; margin-right: 10px; float: left; text-decoration: none;     padding: 10px; }
span { text-align: center; display: inline; padding: 20px; background: blue; color: #fff; float: left; margin-right: 20px; width: 120px; }
div#wrap { float: left; clear: left; margin-top: 10px; }
div#linkOne, div#linkTwo, div#linkThree { background: #ccc; display: inline-block;     float: left; margin-right: 20px; }
</style>

<script type="text/javascript">

    $(document).ready(function(){

      var spans = $("span").each(function(j){ $(this).attr({class : "myDiv" + j}) });
      $(spans).hide();

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

      $(".hide").click(function(){
       $(spans).hide();  
      });

     });

</script>
</head>

<body>
  <div id="linkOne">
    <a class="show" href="#">Show1</a>
    <a class="hide" href="#">Hide1</a>
  </div>
  <div id="linkTwo">
    <a class="show" href="#">Show2</a>
    <a class="hide" href="#">Hide2</a>
  </div>
  <div id="linkThree">
    <a class="show" href="#">Show3</a>
    <a class="hide" href="#">Hide3</a>
  </div>

  <div id="wrap">
    <span class="myDiv">div1</span>
    <span class="myDiv">div2</span>
    <span class="myDiv">div3</span>
  </div>

</body>
</html>

Upvotes: 1

Views: 14360

Answers (5)

tvanfosson
tvanfosson

Reputation: 532465

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

Upvotes: 1

Waleed Amjad
Waleed Amjad

Reputation: 6808

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>

Upvotes: 2

Juri Glass
Juri Glass

Reputation: 91573

A simple solution would be:

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

Upvotes: 1

Alex Duggleby
Alex Duggleby

Reputation: 8038

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

Upvotes: 2

Valentin Golev
Valentin Golev

Reputation: 10095

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

Upvotes: 0

Related Questions