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?

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?

• javascript
• html

Share Improve this question Follow asked Jun 20, 2018 at 6:26 jainilvachhanijainilvachhani 93499 silver badges1515 bronze badges

Add a ment  | 

9 Answers 9

Sorted by: Reset to default 2

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./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>

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./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./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>

you can use core JavaScript Concept. For showing

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

For invisible

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

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();
  });

});

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>

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./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>

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./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>

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./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>

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./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>