Home/ Questions/Q 7912595
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T13:39:03+00:00

I have a following problem here: in my html structure I got some div’s

  • 0

I have a following problem here: in my html structure I got some div’s and they are initially hidden. What I am trying to do is this: on click of a paragraph tag store it’s index and apply that same index to hidden div (witch also has the same index as “clicked” p tag).

For example: when I click SHOW RED DIV ‘paragraph’ show the hidden div (div with class red) with the same index as clicked p tag. My code is not working because it shows all hidden div’s and because I don’t know how to apply stored index 🙁   I hope that someone can help me… THX!!

Here’s the Fiddle

This is what I got so far:

<html>
<head>
<style type="text/css">
div{width:100px;height:100px;display:none;}
.red{background-color:red;}
.blue{background-color:blue;}
.green{background-color:green;}
</style>

<script type="text/javascript">
$(document).ready(function(){
   $("p").click(function(){
   var index=$(this).index(this);
   $('div').data('index',index).show('slow');
   });
});
</script>
</head>
<body>
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
<span>
<p>SHOW RED DIV</p>
<p>SHOW BLUE DIV</p>
<p>SHOW GREEN DIV</p>
</span>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Use this code:

    $(document).ready(function() {
    $("p").click(function() {
        var index = $(this).index();
        $('div:eq(' + index + ')').show('slow');
    });
});​

    DEMO: http://jsfiddle.net/Q96Uj/

    • 0