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>

Only getting parent tag name, not child on click event using prop("tagName"). Why?

I want to get the tags name when I click on them, I have applied a common class on each tag. Now the proplem is when ever I click on p tag or h1 it always gives the parent name.
$(function(){
$('.r').click(function(event) {
// $('.r').each(function() {
event.stopPropagation();
var $detect = $('.r').prop('tagName');
// alert($detect);
console.log($detect);
});
// })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="r">
<h1 class="r">Title H1</h1>
<p class="r">Para</p>
</div>

$(this) instead of $('.r')-
$(function() {
$('.r').click(function(event) {
// $('.r').each(function() {
event.stopPropagation();
var $detect = $(this).prop('tagName');
// alert($detect);
console.log($detect);
});
// })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="r">
<h1 class="r">Title H1</h1>
<p class="r">Para</p>
</div>

$('.r') will always give you the first-element.
So
Either Use $(this):-
$(function(){
$('.r').click(function(event) {
event.stopPropagation();
var $detect = $(this).prop('tagName');//$(this) will give you current clicked object
console.log($detect);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="r">
<h1 class="r">Title H1</h1>
<p class="r">Para</p>
</div>
Or You can use $(event.target) also:-
$(function(){
$('.r').click(function(event) {
event.stopPropagation();
var $detect = $(event.target).prop('tagName');
console.log($detect);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="r">
<h1 class="r">Title H1</h1>
<p class="r">Para</p>
</div>
event.target will give the current element on which event perfom actually.

Change var $detect = $('.r').prop('tagName'); to var $detect = $(this).prop('tagName'); and you will get it.
When you use the selector $('.r'), by default, you are working with the first element of the returned array(<div class="r">).
$(function() {
$('.r').click(function(event) {
// $('.r').each(function() {
event.stopPropagation();
var $detect = $(this).prop('tagName');
// alert($detect);
console.log($detect);
});
// })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="r">
<h1 class="r">Title H1</h1>
<p class="r">Para</p>
</div>

Hide or unhide text with button click

I'm new to html and this is our first intro homework assignment for javascript; so naturally I am freaking out! Here is an example of what I'm talking about:
<div class="someclassname"> <a href="image.jpg">
<img src= Image/image.jpg height="80">
</a>
<p>some text to he hidden with the image!</p>
</div>
I have looked everywhere and found similar stuff but I am way to incompetent to translate it into what I am doing
I'm thinking the code should look something like this maybe?
<script>
$(document).ready(function() {
$("Button").click(function() {
$(".someclassname").toggle();
if ($.trim($(this).text()) == 'Hide') {
$(this).text('Show');
} else {
$(this).next('Hide');
}
});
</script>
Am I close? Please help!

You are close enough...
You have a syntax error in your script, missing pair of }) and then place a button in your html
$(document).ready(function() {
$("button").click(function() {
$(".someclassname").toggle();
if ($.trim($(this).text()) == 'Hide') {
$(this).text('Show');
} else {
$(this).next('Hide');
}
});
}); //this is missing
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Hide</button>
<div class="someclassname">
<a href="image.jpg">
<img src="Image/image.jpg" height="80" />
</a>
<p>some text to he hidden with the image!</p>
</div>

How to convert Image to text box in HTML page?

I have a small image in an HTML page. If I click on the image it should be converted into a textbox and two links have to appear besides that text box. Can anyone help me with a Javascript function which I can call on onClick?
Please find the attached image for better understanding.

HTML
<div class="resim">
<img class="image" src="image.png"/>
</div>
<div class="txt">
<input type="text"/>
</div>
CSS
.txt{
display:none;
}
.resim{
width:100px;
height:100px;
cursor:pointer;
}
JS
$(document).ready(function(){
$(".resim").click(function(){
$(".txt").show(function(){
$(".resim").hide();
});
});
});
Demo
http://jsfiddle.net/6W8nd/1/

try this
<span id="my"><img src="image.png" onClick="z()"></span>
<span id="dis" style="display:none">
<input type="text" id="text">submit
cancel</span>
<script>
function z()
{
document.getElementById("my").style.display="none";
document.getElementById("dis").style.display="";
}
</script>

Here is a jquery implementation:
HTML:
<div id="content">
<img id="image" src="image.png" onclick="transition()"/>
<div id="input">
<input type="text"/>
Submit
Clear
</div>
JS:
$(document).ready(function(){
$("#input").hide();
$("#image").click(function(){transition()});
});
function transition(){
$("#image").fadeOut();
$("#input").fadeIn();
}
Working fiddle : http://jsfiddle.net/6W8nd/

Try following code.
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click on Image change it into text input.</p>
<script type="text/javascript">
function showStuff() {
// show text input
document.getElementById('mytextbox').style.display = 'block';
// hide image
document.getElementById('myimage').style.display = 'none';
}
</script>
<td class="post">
<img id="myimage" src="mypic.png" name="pic" onclick="showStuff()"/>
<span id="mytextbox" style="display: none;">
<input type="text" name="mytextinput">
</span>
</td>
</body>
</html>

Please go through following jsfiddle for desired output link:
Demo
For your information you need to add jQuery code like:
$( ".img-class" ).click(function() {
$(this).hide();
$(".text-class").show();
});
Html code like:
<p class="img-class">
<img src="http://s7.postimg.org/a5m750wnr/Screen_Shot_2014_05_29_at_5_06_07_PM.png" />
<p>
<p class="text-class" style="display:none;">
<input type="text" name="textbox"> Submit Cancel
<p>

ty this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
.container{position: relative;}
.Myimg{height: 50px; width: 50px; position: absolute; top:0; left: 0}
.myform{display: none;position: absolute; top:5px; left: 0}
</style>
<script>
$(document).ready(function() {
$( ".Myimg" ).click(function() {
$( ".myform" ).fadeIn( "slow", function() {
$( ".Myimg" ).fadeOut( "slow");
});
});
$( ".cancel" ).click(function() {
$( ".Myimg" ).fadeIn( "slow", function() {
$( ".myform" ).fadeOut( "slow");
});
});
})
</script>
</head>
<body>
<div class="container">
<img src="http://icons.iconarchive.com/icons/custom-icon-design/office/256/edit-icon.png" class="Myimg" alt="myImg" />
<div class="myform">
<form action="index.html" >
<input type="text" id="myInput" />
submit
cancel
</form>
</div>
</div>
</body>
</html>

Here is a bit more of a generic solution to work on.
Here is a demo, click on the image: http://jsfiddle.net/upGPg/
function InlineEditor(){
var fieldName;
var toggleElement;
var editorTemplate = '<input type="text" name="%name%" /><input type="submit" value="Submit" /><input type="reset" value="Reset" />';
var editorElement;
this.renderEditor = function (){
var node = document.createElement("div");
node.style.display = 'none';
node.innerHTML = editorTemplate.replace("%name%", this.fieldName);
return node;
}
this.setFieldName = function (fieldName){
this.fieldName = fieldName;
}
this.isEditorVisible = function(){
return (this.editorElement.style['display'] != 'none');
}
this.onToggleEditor = function(){
if(this.isEditorVisible())
this.editorElement.style.display = 'none';
else
this.editorElement.style.display = 'block';
}
this.setToggleElement = function(element){
this.toggleElement = element;
var self = this;
element.addEventListener("click", function(){
self.onToggleEditor();
});
this.editorElement = this.toggleElement.parentNode.appendChild(this.renderEditor());
}
}
testEditor = new InlineEditor();
testEditor.setFieldName("test");
testEditor.setToggleElement(document.getElementById("test"));

How to hover an edit text in CSS?

I am stuck with an issue of hover on edittext when placed near the field.
Required:
When I place in div1 or div2 edittext field should be visible and it should be editable
When I place outside div1 or div2 edit text should not be visible only from and to should be visible.
HTML:
<div class="textboxes">
<ul>
<li><input type="text" id="txt" /></li></ul>
</div>
<div class="edit">
<a href="#" id="edit" runat="server" >edit</a>
</div>
CSS:
.textboxes {margin:0; padding:0; display: none; }
.textboxes ul li {list-style-type:none; padding:5px 0 0;}
jQuery:
$("#edit").click(function() {
if ($('.textboxes').is(':visible')) {
$('.textboxes').hide();
// do save info
//$(this).val('Edit');
}
else {
$('.textboxes').show();
// $(this).val('Edit');
}
$(this).hide().after('<span class="edit">' + $(this).val() + '</span>');
});

Check the below demo .. It might helps you..
Demo
HTML:
<div class="wrap">
<div class="box">
<div>From :</div>
<div class="txt">India</div>
<div class="input"><input type="text" /></div>
</div>
<div class="box">
<div>To :</div>
<div class="txt">America</div>
<div class="input"><input type="text" /></div>
</div>
</div>
Script:
$(".box").mouseenter(function (e1) {
var txt = $(this).children(".txt");
input = $(this).children(".input");
input.children("input").val(txt.html());
txt.css("display", "none");
input.css("display", "inline-block");
}).mouseleave(function (e2) {
var txt = $(this).children(".txt");
var input = $(this).children(".input");
txt.html(input.children("input").val());
input.css("display", "none");
txt.css("display", "inline-block");
});
Output:

Mouse enter function in Jquery will help you( I hope so) to achieve your requirement.
Here is an example
$('.textboxes').hide();
$( "#edit" )
.mouseenter(function() {
$('.textboxes').show();
})
.mouseleave(function() {
$('.textboxes').hide();
});

HTML:
<div id="showTextBox">
<input type="text" id="textBox" style="visibility:hidden"></input>
</div>
JQuery:
$("#showTextBox").mouseover(function() {
$("#textBox").css('visibility','visible');
});
$("#showTextBox").mouseout(function() {
$("#textBox").css('visibility','hidden');
});
Working Demo