CODEWITHSUNDEEP
javascriptjqueryhtmlcss
inandout
inandout

Reputation: 93

Replace the same class div and has no ID

enter image description here

I have four DIVS, one is ready and the other three are still hidden. When the link to the second div is pressed, I want the second div to show up, and so for the next link.

The problem is, all the four DIV doesn't have ID and has the same class.

I just want it to automatically run without knowing what is the ID and the class of the div, or anything inside the div. It may look like a slideshow but on click function. 

<p> link to the ready div </P> 
<p> link to the second div </P>
<p> link to the third div </P>
<p> link to the last div </P>


 <div id="wrapper">

<div> this is the div that is ready. This div has no ID and has the same class with others <div>

<div> this is the second div that is hidden. This div has no ID and has the same class with others <div>

<div> this is the third div that is hidden. This div has no ID and has the same class with others <div>

<div> this is the last div that is hidden. This div has no ID and has the same class with others <div>

 </div>

FIDDLE

Upvotes: 0

Views: 312

Answers (3)

Gibbs
Gibbs

Reputation: 22956

JS FIDDLE DEMO

Explanation

<div class="parentDiv">
  <div class="div">1</div>
  <div class="div">2</div>
  <div class="div">3</div>
  <div class="div">4</div>
</div>

<div class="buttons">
   <a idx="1">1</a> 
   <a idx="2">2</a> 
   <a idx="3">3</a> 
   <a idx="4">4</a> 
</div>

$('.buttons a').click(
  function(event)
{
    var idx = $(event.target).attr('idx');
    $('.div').hide(); //Hides all the divs
    $('.parentDiv div:nth-child('+idx+')').show();  // Shows required div
}
);

DISADVANTAGE

If you will insert more contents, there is more work. Else no problem.. If you insert a div , you have to change all the links.

 <div class="parentDiv">
  <div class="div">1</div>
    <div class="div">2.0 Inserted Div</div>   
  <div class="div">2</div>
  <div class="div">3</div>
  <div class="div">4</div>
</div>

<div class="buttons">
   <a idx="1">1</a> 
   <a idx="2">2.0</a>
   <a idx="3">2</a>   
   <a idx="4">3</a> 
   <a idx="5">4</a> 
</div>

Not here , All the idx has to be changed. Since my code uses nth-child property

Edited Updated Fiddle Another Update

Upvotes: 1

Ruddy
Ruddy

Reputation: 9923

Im pretty sure this is what you are looking for.

jQuery

$(".options p").click(function () {
    var ourPick = $("p").index(this) + 1;
    $(".container div:nth-child(" + ourPick + ")").show();
});

Demo Here

So what we are doing is getting the index for the link pressed and then using that to select the div we want to show (this is using :nth-child()).

Note: I have put a container around the links so you it doesn't pick up every p on the page.

If you want only one at a time you can just set them all to hide before showing one.

jQuery:

$(".options p").click(function () {
    var ourPick = $("p").index(this) + 1;
    $(".container div").hide();
    $(".container div:nth-child(" + ourPick + ")").show();
});

Demo Here

Upvotes: 1

Ekansh Rastogi
Ekansh Rastogi

Reputation: 2526

i have made a fiddle that might suite your case please have a look. You can make some modifications according to your needs.

var currentDiv = 0;
$(document).ready(function(){
    $(".container div").click(function(){
        $(".container div").eq(currentDiv+1).css( "display", "block" );
        currentDiv++;
    })
});

JSFIddle Link

Upvotes: 3

Related Questions