Display HTML tags with button clicks, one at a time

Question

I have a series of <p> tags and a button. I firstly want to hide all <p> tags and then on each subsequent button click, I want to display one of the <p> tags.

Right now I am using one button per <p> tag, keeping all other buttons hidden, but I want to know whether this can be done using only one button.

HTML

<p hidden id="p1">One</p>
<button id="button1">Show me more</button>
<p hidden id="p2">Two</p>
<button id="button1" style="display: none;">Show me more</button>
<p hidden id="p3">Three</p>
<button id="button1" style="display: none;">Show me more</button>

In JavaScript, I would display <p> and then display next button and hide this button

$(document).ready(function(){
        $("#button1").click(function(){
        $("#p1").show();
        console.log("button clicked");
        $("#button1").hide();
        $("#button2").show();
            });
        });

Is there a better approach to do this? Maybe using just one button?

Answer 1

You can use a single button for this to show p elements one after another on each button click like:

 $('#button1').click(function(){ var $p = $('p'); for(var i=0; i<$p.length; i++){ if($($p[i]).css('display') === 'none'){ $($p[i]).css('display', 'block'); break; } } }); 

 p { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p id="p1">One</p> <p id="p2">Two</p> <p id="p3">Three</p> <p id="p4">Four</p> <button id="button1">Show me more</button> 

Answer 2

Since you're already using jquery....

You can use :hidden:first to select the first hidden item and show it.

As an added bonus, you can then check if there is not more to show and hide the button

 //Do something on out button click $("#showMore").click(function(){ //We've used the showMeMore class //to hide and identify out paragraphs //Show the first hidden paragraph $(".showMeMore:hidden:first").show(); //Hide the button if there are no more visible. if($(".showMeMore:hidden").length === 0) { $(this).hide(); } }); 

 /*Use some CSS to hide our elements*/ .showMeMore{display:none;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <p class="showMeMore">I'm parra one</p> <p class="showMeMore">I'm parra two</p> <p class="showMeMore">I'm parra three</p> <button id="showMore">Show Me More</button> 

Now lets get fancy and change the button to hide the paragraphs when we get all visible

 //Do something on out button click $("#showMore").click(function() { //We've used the showMeMore class //to hide and identify out paragraphs if ($(this).data("mode") === "show") { //Show the first hidden paragraph $(".showMeMore:hidden:first").show(); //Change the button if there are no more hidden. if ($(".showMeMore:hidden").length === 0) { //Change the mode attribut and set some text $(this).data("mode", "hide").text("Show Me Less"); } } else { //Hide the last visible paragraph //console.log($(".showMeMore:visible:last")); $(".showMeMore:visible:last").hide(); //Change the button if there are no more visible. if ($(".showMeMore:visible").length === 0) { //Change the mode attribut and set some text $(this).data("mode", "show").text("Show Me More"); } } }); 

 /*Use some CSS to hide our elements*/ .showMeMore { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <p class="showMeMore">I'm parra one</p> <p class="showMeMore">I'm parra two</p> <p class="showMeMore">I'm parra three</p> <!-- Note the addition of a data attribute --> <button id="showMore" data-mode="show">Show Me More</button> 

Answer 3

you can use core JavaScript Concept. For showing

document.getElementById('YourID').style.display="block" 

For invisible

document.getElementById('YourID').style.display="none" 

Answer 4

Here is the solution : https://codepen.io/creativedev/pen/oyEqdd

$(document).ready(function(){
  $('p').hide();
  $("button").on('click',function(){
    var clicked = $(this).attr('id').match(/\d+/);
    $("#p"+clicked[0]).show();
    var nextbtn = parseInt(clicked[0])+1;
    $("#button"+nextbtn).show();
  });

});

Answer 5

var index = 1;

$(function() {
  $("#button1").click(function(){
    $("#p" + index).show();
    index++;
  });
});


<p hidden id="p1">One</p>
<p hidden id="p2">Two</p>
<p hidden id="p3">Three</p>
<button id="button1">Show me more</button>

Answer 6

I think this is what you are after, essentially the code below first hides all the p tags, then collects all the p tags in an array and then using recursion shows each one with each subsequent click on the button. It then alerts you to when all tags are displayed.

 $(document).ready(function() { let pTags = document.querySelectorAll('p') pTags.forEach((tag) => { tag.style.display = 'none' }) let num = pTags.length - 1; let i = 0 let show = function() { if (i <= num) { pTags[i].style.display = 'block' i++ } else { alert('All <p> tags are visible') } } $('#button1').on('click', function() { event.preventDefault() show() }) }); 

 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script> <script src="test.js"></script> </head> <body> <p>One</p> <p>Two</p> <p>Three</p> <button id="button1">Show me more</button> </body> </html> 

Answer 7

Put all paragaraph element under a div to specify scope and they can be handle by one button more easily.

 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("p").hide() var ind=0 $("#btn").on("click",function(){ var obj=$("#block").children("p")[ind]; $(obj).show(); ind++ }); }); </script> </head> <body> <div id="block"> <p>I m first</p> <p>second</p> <p>third</p> <input id="btn" type="button" value="clickme"/> </div> </body> </html> 

Answer 8

Try this...

 $(document).ready(function(){ $('p').hide(); var $p = $('p'); var count = 0; $("button").on('click',function(){ count ++; for(var i=1; i<=$p.length; i++){ if(i == count){ $("#p"+i).show(); } } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="button1" >Show me more</button> <p id="p1">One</p> <p id="p2">Two</p> <p id="p3">Three</p> <p id="p4">Four</p> <p id="p5">Five</p> 

Answer 9

See the approach below. Let me know if it is what you're after:

 $(document).ready(function() { $('.show-more').click(function() { var toShow = $(this).attr('data-to-show'); if (!toShow) return; $('#' + toShow).show(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="p1"> <p>One</p> <button class="show-more" data-to-show="p2">Show me more</button> </div> <div id="p2" style="display: none;"> <p>Two</p> <button class="show-more" data-to-show="p3">Show me more</button> </div> <div id="p3" style="display: none;"> <p>Three</p> <button class="show-more" data-to-show="p4">Show me more</button> </div>