Question 11217 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Making div tag invisible on page load and display several div tags on button click – Jquery

I want to make a div tag invisible when the page loads and make it visible everytime a button is clicked. This is what I have on my page:

 <div id="realProp1">
    <input name="FirstName[0]" class="form-control" />
</div>

 <div id="realProp2">
    <input name="FirstName[1]" class="form-control" />
</div>

 <div id="realProp3">
    <input name="FirstName[2]" class="form-control" />
</div>

<button type="button" onclick="AddItem()" class="btn btn-primary">Add Item</button>

Whenever AddItem button is clicked, I want to display one Div tag/item so if I click "Add Item" button, I want to make visible only div tag "realProp1", now if I click "AddItem" button again, I want to make visible "realProp2" div tag. Below is what I have, the code is working for one div tag, but not for several div tags:

 <script>
         window.onload = function () {
              
                document.getElementById("realProp1").style.display = 'none';
                document.getElementById("realProp2").style.display = 'none';


document.getElementById("realProp3").style.display = 'none';
                
            };

 function Additem() {
                document.getElementById("realProp1").style.display = "";
            };

 </script>

How can I make one div tag visible at each button click.

Tags:

2

Answers


  1. 0

    You can use :eq() to compare which div to show and save some variable for holding the last count value or you can just use $("div[id^=realProp]").filter(":hidden").first().show() for filtering the hidden divs and showing first div always.

    Demo Code :

    $('div[id^=realProp]').hide();

var count = 0;
$('.show_div').on('click', function() {
  $('div[id^=realProp]:eq(' + count + ')').show(); //show div
  count++; //for next div to show

  //or without count ..use below 
  //show first div..by filtering hidden divs
  //$("div[id^=realProp]").filter(":hidden").first().show();
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="realProp1">
  <input name="FirstName[0]" class="form-control" />
</div>

<div id="realProp2">
  <input name="FirstName[1]" class="form-control" />
</div>

<div id="realProp3">
  <input name="FirstName[2]" class="form-control" />
</div>

<button type="button" class="btn btn-primary show_div">Add Item</button>

    Without jquery :

    var length = document.querySelectorAll("div[id^='realProp']").length;
var count = 1; //for holding last visible div count

function AddItem() {
  if (count <= length) {
    document.getElementById("realProp" + count).style.display = "block"; //show..
    count++;
  } else {
    console.log("No more divs")
  }

};
    div[id^='realProp'] {
  display: none
}
    <div id="realProp1">
  <input name="FirstName[0]" class="form-control" />
</div>

<div id="realProp2">
  <input name="FirstName[1]" class="form-control" />
</div>

<div id="realProp3">
  <input name="FirstName[2]" class="form-control" />
</div>

<button type="button" onclick="AddItem()" class="btn btn-primary">Add Item</button>
    Login or Signup to reply.
  2. 0 
    let count = 1;

window.onload = function() {
  document.getElementById("realProp1").style.display = 'none';
  document.getElementById("realProp2").style.display = 'none';
  document.getElementById("realProp3").style.display = 'none';

};


function AddItem() {
  for (let i = 1; i < 4; i++) {
    document.getElementById("realProp" + i).style.display = "none";
  }
  document.getElementById("realProp" + count).style.display = "";
  if (count <3 ){
    count++;
  } else {
   count = 1;
   } 
};
    <div id="realProp1">
  <input name="FirstName[0]" class="form-control" />
</div>

<div id="realProp2">
  <input name="FirstName[1]" class="form-control" />
</div>

<div id="realProp3">
  <input name="FirstName[2]" class="form-control" />
</div>

<button type="button" onclick="AddItem()" class="btn btn-primary">Add Item</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search