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>

.text issue in javascript

I'm working on creating a simple calculator. I'm stuck on the display issue. I have all the buttons in the button class. When I try to display anything using for example $(".display").text(output); it doesn't work. I have a display class to be selected, it's under a tag that can have text, and output is a variable that is equal to something. I tried comparing with some other code I had that involved changing text with variables but I don't see what the issue is.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="resources/styles.css">
<link href='https://fonts.googleapis.com/css?family=Lato:400,300,100,300italic' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="calculator-background row">
<p class="calc-title">Free Code Camp Calculator</p>
<div class="row answer-box"><p class="display"></p></div>
<div class="row">
<button type="button">AC</button>
<button type="button">CE</button>
<button type="button">%</button>
<button type="button">/</button>
</div>
<div class="row">
<button type="button">7</button>
<button type="button">8</button>
<button type="button">9</button>
<button type="button">*</button>
</div>
<div class="row">
<button type="button">4</button>
<button type="button">5</button>
<button type="button">6</button>
<button type="button">-</button>
</div>
<div class="row">
<button type="button">1</button>
<button type="button">2</button>
<button type="button">3</button>
<button type="button">+</button>
</div>
<div class="row">
<button type="button">.</button>
<button type="button">0</button>
<button type="button">Ans</button>
<button type="button">=</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="resources/calculator.js"></script>
</body>
</html>
JavaScript:
$(document).ready(function(){
var output = "";
/* Calculator buttons */
// only buttons are calculator buttons
$("button").click(function(){
// gets the text label of the button?
var input = $(this).text();
// if, else if chain for calculator functions
if(input !== "AC" && input !== "CE" && input !== "Ans" && input !== "=")
{
output += input;
}
else if(input === "=")
{
output = eval(output);
}
else if(input === "CE" && output.length > 0)
{
output = output.slice(0,-1);
}
else if(input === "AC" && output.length > 0)
{
output = "";
}
else if(input === "Ans")
{
output = output;
}
// test to see if output wasn't getting anything
output = 5;
// display result in display class, doesn't display anything
$(".display").text(output);
});
});

The problem is the color of your text is white
add this to your css
.display {
color: #000000;
}
Here is the updated fiddle : https://jsfiddle.net/2fyftj7a/1/

The font color inherited by <p class='display'></p> is white, so you can't see it.
Add this your .display class...
color: #000;

I think that you still have an issue where you check for:
output.length
you might have to change that to:
output.toString().length

Showing and hiding contents in a div

There is 4 "READ MORE" button.Clicking on each button shows its content in same div. Clicking twice should hide the content.But clicking on one button and then on next button should show the data of second button.How could I do this?
I tried using javascript,checking if content inside div is empty on button click.if empty show the data and if not document.getElementById("display_message").innerHTML="";
Notification Message:
<input type="button" class="btn btn-default" value="READ MORE" onclick="displayNotificationMessage();">
Verification Message
<input type="button" class="btn btn-default" value="READ MORE" onclick="displayVerificationMessage();">
<div class="container" id="display_message" >
</div>
<script>
function displayNotificationMessage()
{
var data="abcde";
var msg=document.getElementById("display_message").innerHTML;
if(msg!="")
{
document.getElementById("display_message").innerHTML="";
}
else
{
document.getElementById("display_message").innerHTML=data;
}
}
function displayVerificationMessage()
{
var data="bbjkhkjhkjlk";
var msg=document.getElementById("display_message").innerHTML;
if(msg!="")
{
document.getElementById("display_message").innerHTML="";
}
else
{
document.getElementById("display_message").innerHTML=data;
}
}
</script>
But clicking on one button and clicking on next button will not show contents.
How to do this?

Say you have, div with all texts div#content. In that div you place 4 divs, with separate texts, alle with class .sub-content and proper data attributes.
<div id="content">
<div class="sub-content" data-id="b1">Some text 1<div>
<div class="sub-content" data-id="b2">Some text 2<div>
<div class="sub-content" data-id="b3">Some text 3<div>
<div class="sub-content" data-id="b4">Some text 4<div>
</div>
and
<button id="b1">Button1<button>
<button id="b2">Button1<button>
<button id="b3">Button1<button>
<button id="b4">Button1<button>
Then it is as simple as.
$('button').click( function () {
if ( $('.sub-content[data-id=' + $(this).attr("id") + ']').css("display") == "hidden" ) {
$('.sub-content').hide();
$('.sub-content[data-id=' + $(this).attr("id") + ']').show();
} else {
$('.sub-content[data-id=' + $(this).attr("id") + ']').hide();
}
});

get position of an element and display a div after it with javascript

I have 10 different buttons and i want to show a hidden div exactly down from the button the user pressed.the div is currenlty showing exactly at the block the code of div is istead of taking new cords top: left:
THE function call:
<img style="position:relative;float:right;padding-top:7px;" onclick="find_pos(this)" src="images/view_comments.png"></li></a>
function find_pos(ele) {
var x=0;
var y=0;
while(true){
x += ele.offsetLeft;
y += ele.offsetTop;
if(ele.offsetParent === null){
break;
}
ele = ele.offsetParent;
}
hidden_comment_form.style.display='block';
hidden_comment_form.style.top=y;
hidden_comment_form.style.left=x;
}

I give you 2 options :
option 1 :
<div class="main">
<button class="btn">a</button>
<div class="toggle"> a toggle this </div>
</div>
<div class="main">
<button class="btn">b</button>
<div class="toggle"> b toggle this </div>
</div>
<script>
$(document).ready(function() {
$('button.btn').on('click', function() {
var $div = $(this).siblings('.toggle');
$div.toggle();
})
})
</script>
option 2:
<button class="btn">a</button>
<div class="toggle"> a toggle this </div>
<button class="btn">b</button>
<div class="toggle"> b toggle this </div>
<script>
$(document).ready(function() {
$('button.btn').on('click', function() {
var $div = $(this).next();
$div.toggle();
})
})
</script>
i suggest option 1 is better

When clicking on button like showcaps,small,number no change is happening to the div in html, visibility not working

stack.html:
when clicking on the button show caps,show small,show number nothing will happening,showcaps only dispaly kcaps div but now it display all the divs.iam expecting a result such that showcaps only display the kcaps div,similarly showsmall displays ksmall,shownumber displays knumber.The java script file(ext.js) should be an external file,that must be kept separate.
<html>
<head>
<script src="ext.js"></script>
</head>
<body>
<!--Caps Div-->
<div class="bttn1" id="kcaps">
<button class="CSSButton" id="A">A</button>
</div>
<div class="bttn2" id="ksmall">
<button class="CSSButton" id="a">a</button>
</div>
<div class="bttn3" id="knumber">
<button class="CSSButton" id="0">0</button>
</div>
<button type="button" id="ckey"/> Show caps </button>
<button type="button" id="skey"/> Show small </button>
<button type="button" id="nkey"/> Show number </button>
</body>
</html>
ext.js:
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('ckey').addEventListener('click', showElem);
document.getElementById('skey').addEventListener('click', showElem2);
document.getElementById('nkey').addEventListener('click', showElem3);
});
function showElem(e)
{
document.getElementById('kcaps').style.visibility. = "visible";
document.getElementById('ksmall').style.visibility = "hidden";
document.getElementById('knumber').style.visibility = "hidden";
}
function showElem2(e)
{
document.getElementById("kcaps").style.visibility="hidden";
document.getElementById("ksmall").style.visibility="visible";
document.getElementById("knumber").style.visibility="hidden";
}
function showElem3(e)
{
document.getElementById("kcaps").style.visibility="hidden";
document.getElementById("ksmall").style.visibility="hidden";
document.getElementById("knumber").style.visibility="visible";
}

You're using wrong id:-
In your html the if of the buttons are ckey, skey, nkey
and in the javascript file you've written:-
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('ckeys').addEventListener('click', showElem);
document.getElementById('skeys').addEventListener('click', showElem2);
document.getElementById('nkeys').addEventListener('click', showElem3);
});
You should write:- ckey instead of ckeys and so on.
And remove the extra . in showElem function
function showElem(e)
{
document.getElementById('kcaps').style.visibility.(* extra dot should be removed) = "visible";