Develop Reference

Display HTML tags with button clicks, one at a time

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?

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>

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>

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

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>

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>

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>

is it possible to hide div when another button is click?

I am trying to hide the div's when different buttons are clicked but I don't know how to. (So when 'Test 1' is clicked it should hide 'Test 2' Div and vice versa) I checked here and on Google but couldn't find an answer for it.
Javascript :
function showHide(divId) {
var theDiv = document.getElementById(divId);
if (theDiv.style.display == "none") {
theDiv.style.display = "";
} else {
theDiv.style.display = "none";
}
}
HTML :
<input type="button" onclick="showHide('hidethis')" value="Test It">
<div id="hidethis" style="display:none">
<h1>TEST ME!</h1>>
</div>
<input type="button" onclick="showHide('hidethis2')" value="Test It 2">
<div id="hidethis2" style="display:none">
<h1>TEST MEEEEEEEEEEEEEEE 2!</h1>
</div>
JSFIDDLE: is not doing it here but works locallyhttp://jsfiddle.net/S5JzK/

<input type="button" onclick="showHide('hidethis')" value="Test It" />
<div id="hidethis" style="display:none">
<h1>TEST ME!</h1>
</div>
<input type="button" onclick="showHide('hidethis2')" value="Test It 2">
<div id="hidethis2" style="display:none">
<h1>TEST MEEEEEEEEEEEEEEE 2!</h1>
</div>
function showHide(divId) {
$("#"+divId).toggle();
}
Check the Fiddle http://jsfiddle.net/S5JzK/7/

Please try this, it works well and so simple,
<html>
<head>
<style>
.manageDiv{
display:none;
}
</style>
</head>
<body>
<input type="button" class="testButton" value="Test It" />
<input type="button" class="testButton" value="Test It 2" />
<div id="hidethis2" class="manageDiv">
<h1>TEST MEEEEEEEEEEEEEEE 2!</h1>
</div>
</body>
</html>
$(function(){
$(".testButton").on("click", function(){
$("#hidethis2").toggleClass("manageDiv");
});
});

To it work in fiddle, in your example, you need to select (No wrap - in head) on the left.
Look the example below, using pure javascript:
HTML
<input type="button" onclick="showHide('hidethis')" value="Test It">
<div id="hidethis" style="display:none">
<h1>TEST ME!</h1>
</div>
<input type="button" onclick="showHide('hidethis2')" value="Test It 2">
<div id="hidethis2" style="display:none">
<h1>TEST MEEEEEEEEEEEEEEE 2!</h1>
</div>
JAVASCRIPT
function showHide(divId) {
/* Hide all divs */
var elements = document.getElementsByTagName('div');
for (var i = 0; i < elements.length; i++) {
elements[i].style.display = "none";
}
/* Set display */
var theDiv = document.getElementById(divId);
theDiv.style.display = "";
}
http://jsfiddle.net/S5JzK/9/
ANOTHER JAVASCRIPT EXAMPLE
function showHide(divId) {
/* Hide the divs that you want */
var div1 = document.getElementById('#hidethis');
var div2 = document.getElementById('#hidethis2');
div1.style.display = "none";
div2.style.display = "none";
/* Set display */
var theDiv = document.getElementById(divId);
theDiv.style.display = "";
}

Using JQuery:
function showHideDiv(divId, bShow) {
if (bShow) {
$("#" + divId).show();
} else {
$("#" + divId).hide();
}
}

your code seems fine. are you sure you enter the function upon click? try adding a breakpoint using developer tools or an alert.
Anyways, I see you tagged this post with jquery. you can you it to do the task more elegantly.
$("#" + theDiv).hide();
or for showing it:
$("#" + theDiv).show();

"JSFIDDLE: is not doing it here but works locally"
Yes, because by default jsfiddle wraps your JS in an onload handler, which means the function declaration is local to that handler. Inline html attribute event handlers like your onclick="showHide('hidethis')" can only call global functions.
Under jsfiddle's Frameworks & Extensions heading there's a drop-down where you can change the default "onload" to "No wrap - in head" (or "No wrap - in body"). That'll make your function declaration global as in your local implementation.
Demo: http://jsfiddle.net/S5JzK/8/

Hide Button After Click (With Existing Form on Page)

I am trying to hide a button (not inside form tags) after it has been clicked. Below is the existing code. All solutions I have tried either break the functionality or interfere with the form on the page.
The content between the DIV hidden-dev tags is hidden until the button near the bottom of the code is clicked. Once that button is clicked, all of the remaining content is shown to the user.
Once the content is shown, there is no use for the button "Check Availability" so I would like to hide it (especially because the submit button appears for the core form, and it is confusing to see both at the bottom of the full length page.
Here's the existing code that does everything properly (except hide the button after the click)...
<html>
<head>
<style>
.hidden-div {
display:none
}
</style>
</head>
<body>
<div class="reform">
<form id="reform" action="action.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="type" value="" />
<fieldset>
content here...
</fieldset>
<div class="hidden-div" id="hidden-div">
<fieldset>
more content here that is hidden until the button below is clicked...
</fieldset>
</form>
</div>
<span style="display:block; padding-left:640px; margin-top:10px;">
<button onclick="getElementById('hidden-div').style.display = 'block'">Check Availability</button>
</span>
</div>
</body>
</html>

Change the button to :
<button onclick="getElementById('hidden-div').style.display = 'block'; this.style.display = 'none'">Check Availability</button>
FIDDLE
Or even better, use a proper event handler by identifying the button :
<button id="show_button">Check Availability</button>
and a script
<script type="text/javascript">
var button = document.getElementById('show_button')
button.addEventListener('click',hideshow,false);
function hideshow() {
document.getElementById('hidden-div').style.display = 'block';
this.style.display = 'none'
}
</script>
FIDDLE

This is my solution. I Hide and then confirm check
onclick="return ConfirmSubmit(this);" />
function ConfirmSubmit(sender)
{
sender.disabled = true;
var displayValue = sender.style.
sender.style.display = 'none'
if (confirm('Seguro que desea entregar los paquetes?')) {
sender.disabled = false
return true;
}
sender.disabled = false;
sender.style.display = displayValue;
return false;
}

Here is another solution using Jquery I find it a little easier and neater than inline JS sometimes.
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
/* if you prefer to functionize and use onclick= rather then the .on bind
function hide_show(){
$(this).hide();
$("#hidden-div").show();
}
*/
$(function(){
$("#chkbtn").on('click',function() {
$(this).hide();
$("#hidden-div").show();
});
});
</script>
<style>
.hidden-div {
display:none
}
</style>
</head>
<body>
<div class="reform">
<form id="reform" action="action.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="type" value="" />
<fieldset>
content here...
</fieldset>
<div class="hidden-div" id="hidden-div">
<fieldset>
more content here that is hidden until the button below is clicked...
</fieldset>
</form>
</div>
<span style="display:block; padding-left:640px; margin-top:10px;"><button id="chkbtn">Check Availability</button></span>
</div>
</body>
</html>

CSS code:
.hide{
display:none;
}
.show{
display:block;
}
Html code:
<button onclick="block_none()">Check Availability</button>
Javascript Code:
function block_none(){
document.getElementById('hidden-div').classList.add('show');
document.getElementById('button-id').classList.add('hide');
}

You can use this
Html
<button class="btn-plus" onclick="afficherTexte(<?php echo $u["id"]."2" ?>,event)">+</button>
Java script
function afficherTexte(id,event){
var x = document.getElementById(id);
x.style.display = "block";
event.target.style.display = "none";
}

Display text in div when javascript onclick

I've multiple buttons with related text to each button, when user click on the button, the text should change according to button and text should be displayed in the DIV.
I'm using if elseif to choose between the text for each button, now I'm unable to go through the function to pass the text to the div onclick().
<html>
<head>
function display (selected) {
if (decision == firstbox) {
display = "the text related to first box should be displayed";
} else if (decision == secondbox) {
display = "Text related to 2nd box.";
} else {
display ="blank";
}
</head>
<body>
<input type="button" id="firstbox" value= "firstbox" onclick="display(firstbox)" /><br>
<input type="button" id="secondbox" value= "secondbox" onclick="display(firstbox)" /><br>
</body>
</html>

Pure javascript from your code:
function display (selected)
{
if (selected == 'firstbox')
{
texttoshow = "the text related to first box should be displayed";
}
else if (selected == 'secondbox')
{
texttoshow = "Text related to 2nd box.";
}
document.getElementById("thetext").innerHTML = texttoshow;
}
And the html:
<body>
<div id = "thetext"></div>
<button onclick = "display(firstbox)">Firstbox</button>
<button onclick = "display(secondbox)">Secondbox</button>
</body>
For what is worth it, in jQuery (a javascript framework):
$("#buttonclicked").
click(function(){
$("#yourdiv").
html("Your text");
});

This should do what you want
<button type="button" id="button-test">Text that will apear on div</button>
<div id="content">
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#button-test').click(function(){
$('#content').text($(this).text());
});
});
</script>
http://remysharp.com/2007/04/12/jquerys-this-demystified/
http://api.jquery.com/text/

Here I am going to provide you to examples in one. One of them use div and the other don't, one using a link and the other using a button that need to be clicked.
<!DOCTYPE html>
<html>
<body>
<h2>Displaying text when clicked</h2>
<button type="button"
onclick="document.getElementById('demo').innerHTML = 'These are the steps to get your PIN number: Bla bla bla'">
PIN button:</button>
<p id="demo"></p>
</br></br></br>
<a onclick="showText('text1')" href="javascript:void(0);">PIN link:</a>
<script language="JavaScript">
function showText(id)
{
document.getElementById(id).style.display = "block";
}
</script>
<div id="text1" style="display:none;">These are the steps to get your PIN number: Bla bla bla</div>
</body>
</html>

on click show div getting error

When I click on the div, it should open. When I click again, it should close the div. Please help me on this.
<html>
<head>
<script type="text/javascript">
var bool = 0;
function showDiv(){
if(bool==1){
bool=0;
document.getElementById(show).style.visibility = "hidden";
}else if(bool==0){
bool=1;
document.getElementById(show).style.visibility = "visible";
}
}
</script>
</head>
<body>
<input type="button" value="click" onclick="showDiv();" />
<div="show">
<p>it is okay it is okay it is okay it is okay it is okay it is okay it is okay it is okay</p>
</div>
</body>
</html>

You're missing the quotes for the id argument for getElementById()
document.getElementById('show').style.visibility = "hidden";
Also the id attribute name is missing on the <div>
<div="show">
Should be this:
<div id="show">
jsFiddle

Try this:
HTML
<button id="myButton">Show DIV</button>
<div id="show" class="hidden">
<p>it is okay </p>
</div>
CSS
.hidden
{
display:none;
}
JS
$('#myButton').click(function () {
$("#show").slideToggle();
$(this).text($(this).text() == 'Show DIV' ? 'Hide DIV' : 'Show DIV');
return false;
});
Here's the jsfiddle: http://jsfiddle.net/mgrcic/RbjLJ/

When you are referring to
document.getElementById(show).style.visibility
The show refers to a variable, but you are trying to get it as a string, so you should get it quoted
document.getElementById('show').style.visibility

You are writing the div wrong. You should put "show" as the value of your Id attribute:
<div id="show"> </div>
If you use jQuery (you tagged it), why not use jQuery to get things done more cleanly, in an unobtrusive way ?
$(function(){
var bool = 0;
$("input[type='button']").click(function(){
if(bool ==0)
{
bool =1
$("#show").hide();
}
else
{
bool =0
$("#show").show();
}
});
});
Here is the sample: http://jsfiddle.net/sHsuh/10/
Note that this script will bind the function to all button elements in your page. So I would be more specific by adding an Id to my Button and bind with that:
$("#myButtonId").click(function(){
//code goes here
});

Here is the solution, you couldn't get your element without specifying div id="theid":
<html>
<head>
<script type="text/javascript">
var bool = 0;
function showDiv(){
var elem = document.getElementById('show');
console.log(elem);
if(bool==1){
bool=0;
elem.style.visibility = "hidden";
}else if(bool==0){
bool=1;
elem.style.visibility = "visible";
}
}
</script>
</head>
<body>
<input type="button" value="click" onclick="showDiv();" />
<div id="show">
<p>it is okay it is okay it is okay it is okay it is okay it is okay it is okay it is okay</p>
</div>
</body>
</html>

You have made some mistakes:
<div="show"> is wrong. The correct way is <div id="show">.
If you want show and hide means, first set your div's CSS to visibility:hidden;.
You are missing an apostrophe in document.getElementById('show');.
Try this:
<html>
<head>
<script type="text/javascript">
var bool = 0;
function showDiv(){
if(bool==1){
bool=0;
document.getElementById('show').style.visibility = "hidden";
}else if(bool==0){
bool=1;
document.getElementById('show').style.visibility = "visible";
}
}
</script>
</head>
<body>
<input type="button" value="click" onclick="showDiv();" />
<div id="show" style=" visibility:hidden;">
<p>it is okay it is okay it is okay it is okay it is okay it is okay it is okay it is okay</p>
</div>
</body>
</html>