I have a question concerning an event onclick. I found this code during my research. My question is : even before the click the text already appears, is it possible to hide the text until we click on the actual button. And is it possible to have numerous onclick event working seperately that is o say only open the text above it? Thank you
<html>
<head>
<title>Show and hide div with JavaScript</title>
<script>
function showhide()
{
var div = document.getElementById("newpost");
if (div.style.display !== "block") {
div.style.display = "block";
}
else {
div.style.display = "none";
}
}
</script>
</head>
<body>
<div id="newpost">
<p>This div will be show and hide on button click</p>
</div>
<button id="button" onclick="showhide()">Click Me</button>
</body>
</html>
happy coding :)
function showhide() {
var div = document.getElementById("newpost");
div.classList.toggle('hidden');
}
.hidden{
display : none;
}
<html>
<head>
<title>Show and hide div with JavaScript</title>
</head>
<body>
<!--if you want by default hidden then add class .hidden in new post -->
<div id="newpost" class="hidden">
<p>This div will be show and hide on button click</p>
</div>
<button id="button" onclick="showhide()">Click Me</button>
</body>
</html>
make it by default as none in style on display property.
<div id="newpost" style="display:none">
<p>This div will be show and hide on button click</p>
</div>
Yes. In your stylesheet, have the #newpost div display: none and also add a modifier class, .visible with display: block. Lastly in your function you could toggle the .visible class via classList.toggle and you should be good to go:
var div = document.getElementById('newpost');
document.getElementById('button').addEventListener('click', showhide);
function showhide() {
div.classList.toggle('visible');
}
#newpost {
display: none;
}
#newpost.visible {
display: block;
}
<button id="button">Click Me</button>
<div id="newpost">
<p>This div will be show and hide on button click</p>
</div>
In JQuery you can add multiple on click events to a button like so:
$("#button").on("click", function(){
$("#newpost").toggle();
});
$("#button").on("click", function(){
$("#secondpost").toggleClass("bold");
});
#newpost{
display:none;
}
.bold{
font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<head>
<title>Show and hide div with JavaScript</title>
</head>
<body>
<div id="newpost">
<p>This div will be show and hide on button click</p>
</div>
<button id="button">Click Me</button>
<p id="secondpost">toggle bold</p>
</body>
</html>
The first on click toggles the paragraph above.
The second on click toggles a class on the last paragraph that makes it bold.
html
<body>
<div class="growth-step js--growth-step">
<div class="step-title">
<div class="num">2.</div>
<h3>How Can Aria Help Your Business</h3>
</div>
<div class="step-details ">
<p>At Aria solutions, we’ve taken the consultancy concept one step further by offering a full service
management organization with expertise. </p>
</div>
</div>
<div class="growth-step js--growth-step">
<div class="step-title">
<div class="num">3.</div>
<h3>How Can Aria Help Your Business</h3>
</div>
<div class="step-details">
<p>At Aria solutions, we’ve taken the consultancy concept one step further by offering a full service
management organization with expertise. </p>
</div>
</div>
</body>
js
$(document).ready(function(){
$(".js--growth-step").click(function(event){
$(this).children(".step-details").slideToggle(500);
return false;
});
$(".js--growth-step .step-details").click(function(event) {
event.stopPropagation();
});
});
Related
I want to append an element of H2 <h2>H2</h2> to the html as shown below
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="a">
<h1>H1</h1>
<!--I want to add H2 here-->
<h3>H3</h3>
</div>
<div id="b">
</div>
</body>
</html>
I query the div like this var mydiv = $("#a")[0]; and then I want to append <h2>H2</h2> inside myDiv, but after <h1>H1</h1> OR before <h3>H3</h3>. I have played around a bit with after(), insertAfter(), before(), insertBefore() with no luck, because i want to target and use the object 'myDiv' and not the whole html page.
EDIT: Some things I have tried
I have tried the following:
var myDiv = $("#a")[0]
$(myDiv).append("<h2>H2</h2>")
This adds the element to the end of the div
Also tried this:
$("h1").after("<h2>H2</h2>")
This adds <h2>H2</h2> after every <h1>H1</h1> which is not what I need to do, I need to add <h2>H2</h2> only inside the selected div which in this case is myDiv
Use jQuery#after and jQuery#find
var myDiv = $("#a")[0];
$(myDiv).find('h1').after("<h2>H2</h2>");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="a">
<h1>H1</h1>
<!--I want to add H2 here-->
<h3>H3</h3>
</div>
<div id="b"></div>
or
$("#a").find("h1").after("<h2>H2</h2>");
or
$("#a h1").after("<h2>H2</h2>");
Your code is correct, only need change the selector adding h1 in the myDiv selector.
Example:
var myDiv = $("#a h1")[0]
$(myDiv).after("<h2>H2</h2>")
CSS
#main_box{
width:300px;
height:20px;
border:1px solid #000000;
background-color:#FFCC00;
}
#slidingbox{
width:300px;
height:400px;
border:1px solid #000000;
background-color:#8AC007;
}
SCRIPT
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#main_box").click(function(){
$("#slidingbox").slideToggle();
});
});
</script>
HTML
</head>
<body>
<div id="main_box">Click to slide up and down</div>
<div id="slidingbox"></div>
</body>
</html>
I want to add an arrow at the end of first div as an indicator which will change as the second div slides up and down.
Does any one know how to do it?
Add two class for up and down arrows and toggle the class inside the heading click function.
<div class="option-heading">
<div class="arrow-up">▲</div>
<div class="arrow-down">▼</div>
heading 1
</div>
<div class="option-content">
<p>content 1</p>
<p>content 1</p>
<p>content 1</p>
<p>content 1</p>
</div>
//css
$(document).ready(function() {
$(".option-content").hide();
$(".arrow-up").hide();
$(".option-heading").click(function(){
$(this).next(".option-content").slideToggle(500);
$(this).find(".arrow-up, .arrow-down").toggle();
});
});
//script
$(document).ready(function() {
$(".option-content").hide();
$(".arrow-up").hide();
$(".option-heading").click(function(){
$(this).next(".option-content").slideToggle(500);
$(this).find(".arrow-up, .arrow-down").toggle();
});
});
Demo Jsfiddle
You can add pseudo element "after" arrow in the first div then create two class for both up and down.Each arrow contain different "content: url" css then add the class to the div.
//html
<body>
<div class="active" id="main_box">Click to slide up and down</div>
<div id="slidingbox"></div>
</body>
//script
$(document).ready(function() {
$("#main_box").on("click",function(){
$("#slidingbox").slideToggle('fast',function(){
if ($('#slidingbox').is(':hidden')) {
$("#main_box").removeClass('active')
$("#main_box").addClass('in-active')
}
else{
$("#main_box").removeClass('in-active')
$("#main_box").addClass('active')
}
});
});
});
The example below works. (Example taken from w3cschools, and hacked a bit.)
Clicking anywhere in the DIV will cause the address class div to disappear.
However, changing the third line of the script to read
$("button").click(function(){
instead of "div" and it just sits there like a paperweight. What am I missing.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("div").click(function(){
$(this).children(".address").toggle("slow");
});
});
</script>
<style type="text/css">
div.ex
{
background-color:#e5eecc;
padding:7px;
border:solid 1px #c3c3c3;
}
</style>
</head>
<body>
<h3>Island Trading</h3>
<div class=ex>
<button>Hide me</button>
<div class=address>
<p>Contact: Helen Bennett<br>
Garden House Crowther Way<br>
London</p>
</div>
</div>
<h3>Paris spécialités</h3>
<div class=ex>
<button class="hide">Hide me</button>
<div class=address>
<p>Contact: Marie Bertrand<br>
265, Boulevard Charonne<br>
Paris</p>
</div>
</div>
</body>
</html>
Change
$(this).children(".address").toggle("slow");
To something like:
$('.address').toggle("slow");
OR
$(this).siblings(".address").toggle("slow");
Once you make the listener act on the button element, .address is not a child of button any longer. It's a sibling. If there will be multiple .address classes on your page, you must use siblings.
http://jsfiddle.net/9S722/1/
Try this:
$("button").on("click", function(){
$(this).parent().children(".address").toggle("slow");
});
http://jsfiddle.net/hescano/9S722/
$(this).parent().children(".address").toggle("slow");
The button doesn't have children
$("div").click(function(){
$(this).children(".address").toggle("slow");
});
The meaning of such code above is that, when click trigger in div container, it will go through its children for matching "address" class attribute.
However, if you just change $("div") to $("button"), but no child appears within button element. nothing matches for toggle function, just ignore it.
You should change code to as below:
$("button").click(function () {
$(this).next(".address").toggle("slow");
});
which find next sibling to button element. That is the element you want.
<h1>Welcome! Chat now!</h1>
<button id="button">Chat Now</button>
<button id="buttontwo">Chat Categories</button>
<div id="login" style="visibility:hidden">
<button id="closelogin">Close</button>
<input type="text" placeholder="Username"/>
<p id="loginshiz">Pick a username</p>
<button id="go">Go</button>
</div>
When the chat now button is pressed, I want to make the div "login" appear, and when the "closelogin" button inside the div is pressed, I want to make the whole div hidden again. Currently if no buttons are pressed the div should be at hidden state, cheers!
Use jQuery. No way to do it plain html/css.
$('#button').click(function() {
$('#login').css('visibility', 'visible');
});
$('#closelogin').click(function() {
$('#login').css('visibility', 'hidden');
});
If you don't have jQuery included, use javascript:
document.getElementById('button').onclick = function() {
document.getElementById('login').style.visibility = 'visible';
}
document.getElementById('closelogin').onclick = function() {
document.getElementById('login').style.visibility = 'hidden';
}
Look at my example without using of JavaScript.
<input type="checkbox" id="box"/>
<label id="container" for="box">
<div id="button">Chat Now</div>
<div id="login">
<label for="box" id="closelogin">Close</label>
<input type="text" placeholder="Username"/>
<p id="loginshiz">Pick a username</p>
<button id="go">Go</button>
</div>
</label>
and css
#box{display: none;}
#container #login{ display: none;}
#box:checked + #container #login{ display: block;}
Fiddle http://jsfiddle.net/LUdyb/1/
Hope this help.
Using javascript with the help of the button id you can make the div to be hidden by changing the css property to visible. while using jquery you can use toggle,hide,show.
There is no way you can do this in html/css
You can use Jquery
$('#button').click(function() {
$('#login').css('visibility', 'visible');
});
to close
$('#closelogin').click(function() {
$('#login').css('visibility', 'hidden');
});
you just need to change the ID that is #closelogin and the .css('visibility', 'hidden')
You need to include Jquery library like this in your head or bottom of your page to make it work.
eg:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
How can I adapt the following code so that one of the divs will be open when the page is first loaded but will close when other divs are opened?
As it is now, the code hides the open div when another is open but only if that div is closed when the page is loaded.
I found the code here: Hiding a div when another is shown
So credit to whoever posted it.
<body>
<script language="javascript">
function MyFunction(divName){
//hidden val
var hiddenVal = document.getElementById("tempDivName");
//hide old
if(hiddenVal.Value != undefined){
var oldDiv = document.getElementById(hiddenVal.Value);
oldDiv.style.display = 'none';
}
//show div
var tempDiv = document.getElementById(divName);
tempDiv.style.display = 'block';
//save div ID
hiddenVal.Value = document.getElementById(divName).getAttribute("id");
}
</script>
<input id="tempDivName" type="hidden" />
<ul>
<li>Show myDiv1</li>
<li>Show myDiv2</li>
<li>Show myDiv3</li>
</ul>
<br/>
<div id="myDiv1" style="background-color:red; height:200px; width:200px; display:none">
myDiv1
</div>
<div id="myDiv2" style="background-color:yellow; height:200px; width:200px; display:none">
myDiv2
</div>
<div id="myDiv3" style="background-color:green; height:200px; width:200px; display:none">
myDiv3
</div>
</body>
This is how I've adapted it so far to make it so each subsequent div can be accessed from the open div, but none of my (inexpert) tinkering has been able to make the code work when the first div in open to begin with, nor have I been able to find the answer using a search engine.
<body>
<script language="javascript">
function MyFunction(divName){
//hidden val
var hiddenVal = document.getElementById("tempDivName");
//hide old
if(hiddenVal.Value != undefined){
var oldDiv = document.getElementById(hiddenVal.Value);
oldDiv.style.display = 'none';
}
//show div
var tempDiv = document.getElementById(divName);
tempDiv.style.display = 'block';
//save div ID
hiddenVal.Value = document.getElementById(divName).getAttribute("id");
}
</script>
<input id="tempDivName" type="hidden"/>
<div align="center">Contents</div>
<div id="myDiv1" style="display:none">
Page 1
<br/>
Page 2
</div>
<div id="myDiv2" style="display:none">
<div align="right">Page 2 ►</div>
<br/>
text page 1
</div>
<div id="myDiv3" style="display:none">
◄ Page 1
<br/>
<br/>
text page 2
</div>
</body>
You could just add a call to MyFunction to show one automatically.
So, after the divs, you can add
<script>
MyFunction('myDiv1');
</script>
jsfiddle: http://jsfiddle.net/cyberdash/x8nQs/