CODEWITHSUNDEEP
javascriptjqueryhtmlslidetoggle
Happy Dog
Happy Dog

Reputation: 87

HTML- div show and hide on next click

I trying to make an online exam and I want to make the first div show without even click it and when I click the number two button the first div got close and then it opened the two div and so on

right now this code is working but you need to open and close it manually and you can open it all of it at the same time and it will contradict with other divs

PS: I have checked some of the similar questions around here but it didn't show the result that I want

$(document).ready(function(){
  $(".slidingDiv").hide();
  $('.toggle-next-div').click(function(){
      $(this).next().slideToggle();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle-next-div">1</button>
<div class="slidingDiv">
    <p>test1</p>
</div>
<button class="toggle-next-div">2</button>
<div class="slidingDiv">
    <p>test2</p>
</div>
<button class="toggle-next-div">3</button>
<div class="slidingDiv">
    <p>test3</p>
</div>
<button class="toggle-next-div">4</button>
<div class="slidingDiv">
    <p>test4</p>
</div>
<button class="toggle-next-div">5</button>
<div class="slidingDiv">
    <p>test5</p>
</div>

Upvotes: 1

Views: 570

Answers (4)

Just code
Just code

Reputation: 13801

To not hide first element you need :not and to hide all except this one you need .siblings('.slidingDiv')

$(document).ready(function() {
  $(".slidingDiv:not(:first)").hide();
  $('.toggle-next-div').click(function() {
    $(this).next().siblings('.slidingDiv').hide();
    $(this).next().slideToggle();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle-next-div">1</button>
<div class="slidingDiv">
  <p>test1</p>
</div>
<button class="toggle-next-div">2</button>
<div class="slidingDiv">
  <p>test2</p>
</div>
<button class="toggle-next-div">3</button>
<div class="slidingDiv">
  <p>test3</p>
</div>
<button class="toggle-next-div">4</button>
<div class="slidingDiv">
  <p>test4</p>
</div>
<button class="toggle-next-div">5</button>
<div class="slidingDiv">
  <p>test5</p>
</div>

EDIT:

$(document).ready(function() {
  $(".slidingDiv:not(:first)").hide();
  $('.toggle-next-div').click(function(e) {
    if($(this).next('.slidingDiv').is(":visible")){
      e.preventDefault();
      return;
    }
    $(this).next().siblings('.slidingDiv').hide();
    $(this).next().slideToggle();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle-next-div">1</button>
<div class="slidingDiv">
  <p>test1</p>
</div>
<button class="toggle-next-div">2</button>
<div class="slidingDiv">
  <p>test2</p>
</div>
<button class="toggle-next-div">3</button>
<div class="slidingDiv">
  <p>test3</p>
</div>
<button class="toggle-next-div">4</button>
<div class="slidingDiv">
  <p>test4</p>
</div>
<button class="toggle-next-div">5</button>
<div class="slidingDiv">
  <p>test5</p>
</div>

Upvotes: 1

Coding Master
Coding Master

Reputation: 57

I have slightly modified the HTML, placing only a single next button instead of next button with each div. Now, first div will display on page load, but on each "Next" button click, the shown div will be hidden and its next div will be shown as so on:

HTML:

<div class="slidingDiv">
 <p>test1</p>
</div>
<div class="slidingDiv">
 <p>test2</p>
</div>
<div class="slidingDiv">
 <p>test3</p>
</div>
<div class="slidingDiv">
  <p>test4</p>
</div>
<div class="slidingDiv">
 <p>test5</p>
</div>
<button class="next-btn">Next</button>

JS:

$(document).ready(function () {
    $(".slidingDiv").hide();
    var ref = $(".slidingDiv").first();
    ref.show();
    $('.next-btn').click(function () {
        ref.hide();
        ref = ref.next();
        ref.show();
    });
});

Upvotes: 0

ATheCoder
ATheCoder

Reputation: 1080

You need to implement a state for your page.

For example when your page is on state 1 the first div is open and others are closed, If on state 2 the second div is open and others are closed and so on.

Easiest way I can think of to implement this right now is the following:

JavaScript:

let state = 1
function changeState(newState){
    state = newState
    updateDivs()
}
function updateDivs(){
    let divs = $(".slidingDiv")
    for(let divIndex in divs){
        if(divIndex == state) divs[divIndex].show()
        else divs[divIndex].hide()
    }
}

document.onload = function(){
    updateDivs()
}

Html:

<button class="toggle-next-div" onclick="changeState(1)">1</button>
<div class="slidingDiv">
        <p>test1</p>
</div>
<button class="toggle-next-div" onclick="changeState(2)">2</button>
<div class="slidingDiv">
        <p>test2</p>
</div>
<button class="toggle-next-div" onclick="changeState(3)">3</button>
<div class="slidingDiv">
        <p>test3</p>
</div>
<button class="toggle-next-div" onclick="changeState(4)">4</button>
<div class="slidingDiv">
        <p>test4</p>
</div>
<button class="toggle-next-div" onclick="changeState(5)">5</button>
<div class="slidingDiv">
        <p>test5</p>
</div>

Upvotes: 0

Mohammad
Mohammad

Reputation: 21499

First you should hide all .slidingDiv except first that you can use :gt() to do this work. Then on click event handler show clicked element and hide siblings of it.

Your code should changed to

$(document).ready(function(){
  $(".slidingDiv:gt(0)").hide();
  $('.toggle-next-div').click(function(){
    $(this).next().slideToggle();
    $(this).next().siblings(".slidingDiv").slideUp();   
  });
});

Also you can simplify your code and use jquery chaining

$('.toggle-next-div').click(function(){
  $(this).next().slideToggle().siblings(".slidingDiv").slideUp();   
}).next(".slidingDiv:gt(0)").hide();


$('.toggle-next-div').click(function(){
  $(this).next().slideToggle().siblings(".slidingDiv").slideUp();	
}).next(".slidingDiv:gt(0)").hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle-next-div">1</button>
<div class="slidingDiv">
  <p>test1</p>
</div>
<button class="toggle-next-div">2</button>
<div class="slidingDiv">
  <p>test2</p>
</div>
<button class="toggle-next-div">3</button>
<div class="slidingDiv">
  <p>test3</p>
</div>
<button class="toggle-next-div">4</button>
<div class="slidingDiv">
  <p>test4</p>
</div>
<button class="toggle-next-div">5</button>
<div class="slidingDiv">
  <p>test5</p>
</div>

Upvotes: 0

Related Questions