CODEWITHSUNDEEP
jqueryhtmlcss
Michi
Michi

Reputation: 5471

Display/Hide content with prev/next buttons

I have the following jQuery code which you can also find in the JSfiddle here:

/* Code for buttons individually */
$(document).ready(function() {
  $(".panel_button").on('click', function() {
    $(".panel").hide();
    var targetPanel = $(this).attr('data-target');
     $(targetPanel).show();
    $(this).toggleClass('active');
  });
});


/* Code for previous and next buttons */
$(document).ready(function(){
    $(".panel").each(function(e) {
        if (e != 0)
            $(this).hide();
    });

    $("#next").click(function(){
        if ($(".panel:visible").next().length != 0)
            $(".panel:visible").next().show().prev().hide();
        else {
            $(".panel:visible").hide();
            $(".panel:first").show();
        }
        return false;
    });

    $("#prev").click(function(){
        if ($(".panel:visible").prev().length != 0)
            $(".panel:visible").prev().show().next().hide();
        else {
            $(".panel:visible").hide();
            $(".panel:last").show();
        }
        return false;
    });
});
body {
  height: 500px;
}

.contents {
  width: 100%;
  height: 20%;
}

.buttons {
  background-color: green;
  float: left;
  width: 100%;
}

.panel_button {
  float: left;
  width: 20%;
  
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

#panel1, #panel2, #panel3 {
  background-color: blue;
  float: left;
  width: 100%;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contents">

  <div id="panel1" class="panel">
    <div class="content_01a">Here goes content1a</div>
    <div class="content_01b">Here goes content1b</div>
  </div>

  <div id="panel2" class="panel">
    <div class="content_02a">Here goes content2a</div>
    <div class="content_02b">Here goes content2b</div>
    <div class="content_02c">Here goes content2c</div>
  </div>

  <div id="panel3" class="panel">
    <div class="content_03a">Here goes content3a</div>
    <div class="content_03b">Here goes content3b</div>
  </div>

</div>

<div class="buttons">
  
  <div class="panel_button" data-target="#panel1"> PREVIOUS </div>

  <div class="panel_button" data-target="#panel1"> Button_01 </div>
  <div class="panel_button" data-target="#panel2"> Button_02 </div>
  <div class="panel_button" data-target="#panel3"> Button_03 </div>
  
  <div class="panel_button" data-target="#panel1"> NEXT </div>
  
</div>

As you can see in the code above I show/hide different contents depending on which button is clicked. The button_01 til button_03 individually work perfectly.

Now, I wanted to add a prev and next button using the code from here but I could not make it work.
Do you have any idea what I need to change in the second code within the jQuery to make the prev and next buttons work?

Upvotes: 0

Views: 863

Answers (2)

G.O.
G.O.

Reputation: 21

So the problem is you are missing the id's of 'next' and 'prev' buttons as stated. But you do not need additional classes for those only. You can still use your '.panel_button' class on your 'prev' and 'next' buttons. This way there is no extra css added.

You only need to take event propagation into account then. 

  $(".buttons").on('click', '.panel_button', function() {
    $(".panel").hide();
    var targetPanel = $(this).attr('data-target');
    $(targetPanel).show();
    $(this).toggleClass('active');
  });

Check the fiddle out: https://jsfiddle.net/golala/Lmzrhk4u/

I only changed the way you handled the on click event of '.panel_button'. This is because your buttons have the same class and if you had your panel_button click event, you would execute this event as well (after you've executed #next/#prev on click). Which gives you the unwanted behaviour.

To prevent this, you only want to implement the on click method on its parent (.buttons) instead. This way you will stop event bubbling with "return false" and you will never execute the method above after #next/#prev on click events.

PS: You do not necessarily need "return false" in this case, because you only want to stop propagation. You can add "e.stopPropagation();" instead of "return false".

This may sound complicated but I suggest you read about 'event bubbling' and 'return false' statement. You will understand the whole issue better then.

Upvotes: 0

fdomn-m
fdomn-m

Reputation: 28611

You've not updated your next/prev buttons to use your updated code, change:

<div class="panel_button" data-target="#panel1"> PREVIOUS </div>

to

<div id="prev"> PREVIOUS </div>


/* Code for buttons individually */
$(document).ready(function() {
  $(".panel_button").on('click', function() {
    $(".panel").hide();
    var targetPanel = $(this).attr('data-target');
     $(targetPanel).show();
    $(this).toggleClass('active');
  });
});


/* Code for previous and next buttons */
$(document).ready(function(){
    $(".panel").each(function(e) {
        if (e != 0)
            $(this).hide();
    });

    $("#next").click(function(){
        if ($(".panel:visible").next().length != 0)
            $(".panel:visible").next().show().prev().hide();
        else {
            $(".panel:visible").hide();
            $(".panel:first").show();
        }
        return false;
    });

    $("#prev").click(function(){
        if ($(".panel:visible").prev().length != 0)
            $(".panel:visible").prev().show().next().hide();
        else {
            $(".panel:visible").hide();
            $(".panel:last").show();
        }
        return false;
    });
});
body {
  height: 500px;
}

.contents {
  width: 100%;
  height: 20%;
}

.buttons {
  background-color: green;
  float: left;
  width: 100%;
}

.panel_button {
  float: left;
  width: 20%;
  
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

#panel1, #panel2, #panel3 {
  background-color: blue;
  float: left;
  width: 100%;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contents">

  <div id="panel1" class="panel">
    <div class="content_01a">Here goes content1a</div>
    <div class="content_01b">Here goes content1b</div>
  </div>

  <div id="panel2" class="panel">
    <div class="content_02a">Here goes content2a</div>
    <div class="content_02b">Here goes content2b</div>
    <div class="content_02c">Here goes content2c</div>
  </div>

  <div id="panel3" class="panel">
    <div class="content_03a">Here goes content3a</div>
    <div class="content_03b">Here goes content3b</div>
  </div>

</div>

<div class="buttons">
  
  <div id="prev"> PREVIOUS </div>

  <div class="panel_button" data-target="#panel1"> Button_01 </div>
  <div class="panel_button" data-target="#panel2"> Button_02 </div>
  <div class="panel_button" data-target="#panel3"> Button_03 </div>
  
  <div id="next"> NEXT </div>
  
</div>

Upvotes: 1

Related Questions