Showing and hiding contents in a div - javascript

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

Related

Clone <div> and change onclick code of inner button

I have a div with id="add-dependent" including 2 rows and a button (add dependent) inside of the div. When "add dependent" button is clicked, the first row would be cloned and insert before (add dependent) button. Actually I have another button outside of the div called (add applicant) and by clicking it, whole of the div would be cloned and added before (add applicant) button. my code is like this :
let nextLabel=2
let nextId=1
function addApplicant(){
var elem= document.querySelector("#add-dependent");
var clone=elem.cloneNode(true);
var add= document.getElementById("add-applicant");
clone.id = "add-dependent"+nextLabel;
elem.parentElement.insertBefore(clone,add);
var label = clone.querySelector("label");
label.innerHTML = '<button class="close remove" onClick="$(this).parent().parent().parent().parent().remove()">x</button>' + "Applicant " + (nextLabel++) ;
}
function addDependent(){
var elem= document.querySelector(".dependent");
var clone=elem.cloneNode(true);
var add= document.getElementById("dependent");
elem.parentElement.insertBefore(clone,add);
var label=clone.querySelector('label');
label.innerHTML= '<button id="btn" name="btn" type="button" class="close float-left" style="font-size:12px;" onClick="$(this).parent().parent().parent().remove();" >x</button>';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="add-dependent">
<div class="form-row dependents">
<div>
<label class="text-left" contenteditable="true">Applicant 1: </label>
</div>
<div >
<input type="number" placeholder="age">
</div>
</div>
<div class="form-row dependent">
<div>
<button id="btn" name="btn" type="button" class="close " onClick="$(this).parent().parent().remove();" >x</button>
</div>
<div>
<input type="number" placeholder="age">
</div>
</div>
<button id="dependent" onClick="addDependent()">Add dependent</button>
</div>
<button id="add-applicant" onClick="addApplicant()">Add applicant</button>
my problem is when i click on (add dependent) in cloned div, the row is added to main div not cloned one.
hope to here you soon.
Thanks a lot
There are many changes I made to your code and I'll try to explain them here. When you're working with duplicating, appending, removing etc, id's can become difficult to work with - you can't have duplicates of IDs and your code then has to track which id is affected by which button etc.
Its much easier to work with relative paths. For instance when you want to add a dependent, it's easier to say 'find a dependent input to clone and place it inside the container from where I clicked this add-dependent button' - and walla no need for ids. To find the relative div's, I used a combination of event.target, closest() and querySelctor - like this:
e.target
.closest('.add-applicant-container')
.querySelector('.dependents')
.append(clone);
This says Starting from the button I clicked, find the closest '.add-applicant-container' and inside that find the first '.dependents' and place our clone right after that
Finally, the buttons. Because you're creating and destroying these buttons in the process, it's best to set up a listener on document and test to see which button was clicked. This is called event delegation. For the dependent delete button, we only need to find the relative element and delete it so:
if (e.target.classList.contains('close')) {
e.target.closest('.dependent-container').remove()
}
let nextLabel = 2
let nextId = 1
document.addEventListener('click', function(e) {
if (e.target.classList.contains('add-applicant')) {
addApplicant(e)
} else if (e.target.classList.contains('btn-dependent')) {
addDependent(e)
} else if (e.target.classList.contains('remove-applicant')) {
e.target.closest('.add-applicant-container').remove()
} else if (e.target.classList.contains('close')) {
e.target.closest('.dependent-container').remove()
}
})
function addApplicant(e) {
let applicant = document.querySelector('.add-applicant-container')
var clone = applicant.cloneNode(true);
clone.id = "add-dependent" + nextLabel;
clone.querySelectorAll('.dependent-container').forEach((el, i) => {
if (i !== 0) el.remove()
})
applicant.parentElement.insertBefore(clone, e.target);
var label = clone.querySelector("label");
label.innerHTML = '<button class="close remove-applicant">x</button>' + "Applicant " + (nextLabel++);
}
function addDependent(e) {
let dependent = document.querySelector('.dependent-container')
var clone = dependent.cloneNode(true);
e.target.closest('.add-applicant-container').querySelector('.dependents').append(clone);
// var label = clone.querySelector('label');
// label.innerHTML = '<button id="btn" name="btn" type="button" class="close float-left" style="font-size:12px;" >x</button>';
}
.add-applicant-container{
padding:10px;
}
.dependent-container{
padding:5px 0 ;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="add-applicant-container">
<div class="form-row dependents">
<div>
<label class="text-left" contenteditable="true">Applicant 1: </label>
</div>
<div>
<input type="number" placeholder="applicant age">
</div>
</div>
<div class="form-row dependent-container">
<div>
<input type="number" placeholder="dependent age"> <button id="btn" name="btn" type="button" class="close ">x</button>
</div>
</div>
<button class="btn-dependent">Add dependent</button>
</div>
<button class="add-applicant">Add applicant</button>

How to put a button active by default?

thanks in advance.
The question is:
I have 2 buttons that shows the content of the div when the user click on it.
The content of the div are in a function that shows the content when the users click on the button (onclick).
But when the page loads just appear the two buttons without any content, is there any way to 'put' one of these buttons as active by default?
I tried with this:
Html:
<div class="diferencias col-md-12 col-lg-12">
<div class="diferencias col-md-6 col-lg-6"><input type="button" value="Web" onClick="fashioncatweb();">
</div>
<div class="diferencias col-md-6 col-lg-6"> <input type="button" value="Logo" onClick="fashioncatlogo();">
</div>
</div>
<div class="row">
<div id="container">
<div id="content"></div>
</div>
</div>
JS:
function fashioncatweb()
{
var text = "<p>text";
var img = "images/.....";
var content = "<div class=\"col-md-7\"><div class=img><img class=img-responsive src=\"" + img + "\" alt=\"\" /></div></div>"
+ "<div class=\"col-md-5\"><div class=pre-scrollable id=\"fashion\">" + text + "</div></div>";
appendToContainer(content);
}
function fashioncatlogo()
{
var text = "<p>text";
var img = "images/....png";
var content = "<div class=\"col-md-7\"><div class=img><img class=img-responsive src=\"" + img + "\" alt=\"logo\" /></div></div>"
+ "<div class=\"col-md-5\"><div class=pre-scrollable id=\"logo\">" + text + "</div></div>";
appendToContainer(content);
}
$(document).ready(function () {
piramidalweb();
});
But it just works for one section and I have like 15 different sections.
Thanks again!!
You should have a function that is called on the click of the buttons:
Using pure Javascript:
<input type="button" value="Button1" id="btn1" onclick="showContent(this.id)" />
function showContent(id) {
if(id === "btn1") {
// show the content
}
}
Then call immediately at the base of the page within script tags:
showContent("btn1");
That will load the content immediately.
To improve this you would execute this function onload, or in a ready function within jQuery, but hopefully you'll be able to take it from there.

3 Button showing and hiding text for HTML

There are three buttons (button 1, button 2, and button 3) and three texts, (text 1, text 2, and text 3). Each text is right under its corresponding button. Imagine it like so,
[button 1]
..text 1..
[button 2]
..text 2..
[button 3]
..text 3..
The following conditions should apply,
When the document loads all texts should be hidden.
Clicking on a button who's corresponding text is hidden should show that text.
Clicking on a button who's corresponding text is shown should hide that text.
At most one text should be showing at any given time.
And if a text is shown, and I click the respective button, that text will be hidden. For example, if I clicked button 1, and text 1 shows. And I click button 1 again, text 1 should be hidden.
How can I achieve this effect?
I tried to do this just with 2 buttons, but I couldn't figure it out.
var show1 = false;
var show2 = false;
function showDearPresidentText() {
if(show1 == false && show2 == false) {
document.getElementById("text1").style.display="block";
document.getElementById("text2").style.display="none";
show1 = true;
}
else if(show1 == true && show2 == false) {
document.getElementById("text1").style.display="none";
document.getElementById("text2").style.display="none";
show1 = false;
}
else if(show1 == false && show2 == true) {
document.getElementById("text1").style.display="block";
document.getElementById("text2").style.display="none";
show1 = true;
}
}
function showDearReaderText() {
if(show1 == false && show2 == false) {
document.getElementById("text1").style.display="none";
document.getElementById("text2").style.display="block";
show2 = true;
}
else if(show1 == true && show2 == false) {
document.getElementById("text1").style.display="none";
document.getElementById("text2").style.display="block";
show1 = true;
}
else if(show1 == false && show2 == true) {
document.getElementById("text1").style.display="block";
document.getElementById("text2").style.display="block";
show1 = false;
}
}
Try using .css() , Next Adjacent Selector ("prev + next") with context set to this within click handler , .not()
$("button").click(function(e) {
var div = $("+ div", this);
div.css("display", div.css("display") === "block" ? "none" : "block");
$(this.nodeName + " + div").not(div).css("display", "none");
})
div {
display:none;
}
button {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>button 0</button>
<div>text 0</div>
<button>button 1</button>
<div>text 1</div>
<button>button 2</button>
<div>text 2</div>
<button>button 3</button>
<div>text 3</div>
Try this one:
Change your CSS as per your requirment :
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#button1").click(function() {
$("#text1").toggle();
$("#text2").css("display", "none");
$("#text3").css("display", "none");
});
$("#button2").click(function() {
$("#text2").toggle();
$("#text1").css("display", "none");
$("#text3").css("display", "none");
});
$("#button3").click(function() {
$("#text3").toggle();
$("#text1").css("display", "none");
$("#text2").css("display", "none");
});
});
</script>
</head>
<body>
<div>
<div style="float:left">
<input type="button" name="button1" value="Button 1" id="button1">
<div id="text1" style="display:none">Text 1</div>
</div>
<div style="float:left">
<input type="button" name="button2" value="Button 2" id="button2">
<div id="text2" style="display:none">Text 2</div>
</div>
<div style="float:left">
<input type="button" name="button3" value="Button 3" id="button3">
<div id="text3" style="display:none">Text 3</div>
</div>
</div>
</body>
</html>
We are not here to write the full code samples for you, but here is the useful hint: acquire the clicked button's index in the body of .click() method and hide all text elements except the one with the same index.
Update: just in case anyone will be interested in my approach to this problem, here is the sample function (assuming all buttons have class 'button' and all texts class 'text'):
$('.button').click(function() {
index = $('.button').index(this);
$('.text').hide();
$('.text:eq(' + index + ')').show();
});
Here's a solution using bootstrap and jquery
Javascript:
//using jQuery
//show text on button click
$("button").click(function() {
$("p").addClass("hide");
switch (this.id) {
case "button-1":
$("p#text-1").removeClass("hide");
break;
case "button-2":
$("p#text-2").removeClass("hide");
break;
case "button-3":
$("p#text-3").removeClass("hide");
break;
default:
break;
} //close switch
}); //end tabs li click
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!--jQuery-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<!--using Bootstrap-->
<button type="button" class="btn btn-default" id="button-1">Show Text 1</button>
<br/>
<p id="text-1" class="hide">Text 1</p>
<button type="button" class="btn btn-default" id="button-2">Show Text 2</button>
<br/>
<p id="text-2" class="hide">Text 2</p>
<button type="button" class="btn btn-default" id="button-3">Show Text 3</button>
<br/>
<p id="text-3" class="hide">Text 3</p>
<p class="debug"></p>
Hope this helps!
Please try the below modfied code.This is the sample code but you can get idea to figure out your problem
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.btn').click(function() {
$('.btn').each(function() {
$(this).next().hide();
});
$(this).next().toggle();
});
});
</script>
<body>
<div>
<button class="btn">Button 1</button>
<h1 style="display:none">button's 1 text</h1>
</div>
<div>
<button class="btn">Button 2</button>
<h1 style="display:none">button's 2 text</h1>
</div>
<div>
<button class="btn">Button 3</button>
<h1 style="display:none">button's 3 text</h1>
</div>
</body>
Let me know if you have any doubt
Thanks

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";

change displayed div with Javascript

I've been trying to get this to work and thought it would be relatively easy but i'm just unable to target my div's with javascript.
I want a list of boxes and each one will be clickable and each one has a buddy which is hidden. when you click a , it hides and shows its buddy which will have an input box. Type the text in you need and press ok and it changes back to it's original displaying the text you have entered.
the head contains the following:
<head>
<script language="javascript">
var state = 'none';
function showhide(layer_ref) {
if (state == 'block') {
state = 'none';
}
else {
state = 'block';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.display = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].display = state;
}
if (document.getElementById &&!document.all) {
hza = document.getElementById(layer_ref);
hza.style.display = state;
}
}
</script>
And then my HTML contains:
<div id="div0">
<a href="#" onclick="showhide('div1');" style="text-decoration:none;">
<div style="width:200px; height:30px; background-color:grey;color:white">
Input: <div id="showinput"></div>
</div>
</a>
</div>
<div id="div1" style="display:none;">
<div style="width:200px; height:30px; background-color:grey;color:white">
<input type="text id="addInput" /">
<input type="submit" value="submit" name="submit" onclick="showhide('div1');" />
</div>
</div>
I'm trying to add the following but it just won't update the original and the script just makes the buddy div show below the original. How can i hide the original at the same time?
var myobj = document.getElementById("addInput");
var mytext = myobj.value;
document.getElementById("showinput").innerHTML = mytext;
You are missing a closing quote around type="text so the input id is not set. Try:
<input type="text" id="addInput" />

Categories

Resources