Home/ Questions/Q 388955
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T15:49:11+00:00

I am an extreme noob with jQuery. I’m trying to show an item based

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0