so, ive got 2 divs, one which is visible from start, and the other is hidden. Im trying to work out the action so that when i click a single link, the first div disappears and the second appears, and to reverse on second click. I have some knowledge of javascript, but zero knowledge of Jquery and those were the only questions i could find on here.
<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleContent");
var text = document.getElementById("displayContent");
if(ele.style.display == "block") {
ele.style.display = "none;
text.innerHTML = "blog posts";
}
else {
ele.style.display = "block";
text.innerHTML = "hide posts";
}
}
</script>
this is what i have so far, which works for one div, but i dont know how to change this to work for 2 divs through the same link
You are missing a quote, add a second quote like below:
ele.style.display = "none";
Use a class rather than an ID.
<style type="css/stylesheet">
#div1 {
width:200px;
height:100px;
background:green;
}
#div2 {
width:200px;
height:100px;
background:red;
}
.toggle {
display:none;
}
</style>
<div id="menu">Toggle
</div>
<div id="div1" class="toggle">
<p class="displayContent">I'm some content 1</p>
</div>
<div id="div2" class="toggle">
<p class="displayContent">I'm some content 2</p>
</div>
<script language="javascript">
var a = document.getElementById("link");
a.onclick = function () {
var ele = document.getElementsByClassName("toggle");
for (var i = 0; i < ele.length; i++) {
var item = ele[i];
if (item.style.display == "block") {
item.style.display = "none";
} else {
item.style.display = "block";
item.innerHtml = "some content from " + i;
}
}
};
</script>
Here is the JSFiddle solution http://jsfiddle.net/dUU7j/
Related
I would like to have both collapsible button element and image area highlight on mouseover element on my webpage. I can get both working separately but not together. The script below does not work; somehow the collapsible button element kills the image area highlight on mouseover element. Any suggestions for modifications to get both elements working?
Script below is what I have tried:
$(function() {
$('.map').maphilight();
});
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
.collapsible {
}
.active, .collapsible:hover {
background-color: #ccc;
}
.content {
display: none;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button type="button" class="collapsible">
<h1 id="Header">Collapsible header button</h1>
</button>
<div class="content">
<p>Map highlight test - Hover over the first 'o'-letter</p>
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="map" usemap="#simple">
<map name="simple">
<area href="#" shape="rect" coords="70,25,115,70" alt="Link" title="Test">
</map>
</div>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/maphilight/1.4.2/jquery.maphilight.min.js"></script>
</body>
</html>
I found answer to my question by myself😀
Call to Maphilight() needs to be wrapped inside the function for the collapsible element.
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
$('.map').maphilight();
});
}
I have two divs, one is hidden and the other one is visible. I'm using css display:none; to hide first and using style.display="block";
when I refresh the page it gives same div name in the address bar but the div is hidden.
I just want the div to stay block after refreshing or submitting the form inside the div
<html>
<head>
<meta charset="utf-8">
<title>Sample</title>
<style>
#content {
flex:8;
display:flex;
flex-direction:row;
justify-content:space-between;
flex-basis:100%;
padding:0 10px 0x 10px;
text-align:center;
}
#leftnav {
flex:1;
padding-top:20px;
}
#midcontent {
flex:9;
text-align:center;
padding-top:20px;
display:block;
}
#leftnav ul {
display: block;
margin: 0px;
padding: 0px;
list-style-type: none;
}
#m1,#m2,#m3 {
flex:9;
text-align:center;
padding-top:20px;
display:none;
}
</style>
</head>
<body>
<div id="content">
<div id="leftnav" align="center">
<ul>
<li>Page m1</li>
<li>Page m2</li>
<li>Page m3</li>
</ul>
</div>
<div id="midcontent" align="center">
<p>Home Page</p>
</div>
<div id="m1" align="center">
<p>Div m1</p>
</div>
<div id="m2" align="center">
<p>Div m2</p>
</div>
<div id="m3" align="center">
<p>Div m3</p>
</div>
</div>
<script type="text/javascript">
var d=document.getElementById('midcontent');
var d1=document.getElementById('m1');
var d2=document.getElementById('m2');
var d3=document.getElementById('m3');
function div1() {
if(d.style.display === "block") {
d.style.display = "none";
d1.style.display = "block";
} else {
d.style.display = "none";
d1.style.display = "block";
d2.style.display = "none";
d3.style.display = "none";
}
}
function div2() {
if(d.style.display === "block") {
d.style.display = "none";
d2.style.display = "block";
} else {
d.style.display = "none";
d1.style.display = "none";
d2.style.display = "block";
d3.style.display = "none";
}
}
function div3() {
if(d.style.display === "block") {
d.style.display = "none";
d3.style.display = "block";
} else {
d.style.display = "none";
d1.style.display = "none";
d2.style.display = "none";
d3.style.display = "block";
}
}
</script>
</body>
</html>
change:
function div1() {
var d=document.getElementById('midcontent');
var d1=document.getElementById('m1');
if(d.style.display === "block") {
d.style.display = "none";
d1.style.display = "block";
} else {
d.style.display = "none";
d1.style.display = "block";
}
}
to:
function toggleDiv() {
document.getElementById('midcontent').style.display = "none";
document.getElementById('m1').style.display = "block";
}
"i just want the div to stay block after refreshing" call the function on page load in html to make it execute after refresh of page:
<body onLoad="toggleDiv()">
<!-- Your html content -->
</body>
alternatively you can also do it in js:
document.addEventListener("DOMContentLoaded", function(event) {
// Your code to run since DOM is loaded and ready
toggleDiv()
});
If you want more in depth persistance and/or variable changes please provide additional information on how and why you want to do this exactly! Hope it helps! :)
I am using a code that unhides a hidden div.
HTML:
<div id="unhide" style="display:none;">DUMMY TEXT</div>
<button id="expand" name="expand">Show The Div</button>
JS:
document.getElementById("expand").addEventListener("click", function()
{
document.getElementById('unhide').style.display = "block";
});
How can I make the same button hide the div after clicking it again? Is it possible to alter the code I am using now?
use toggle to simple hide and unhide div
$("#expand").click(function() {
$("#unhide").toggle();
});
Use toggle for this show and shide, see below code.
$(document).ready(function(){
$("#expand").click(function(){
$("#unhide").toggle();
});
});
By doing some modifications in JavaScript, you can use the same button to hide the div as well as you can change the button text like below.
JS:
document.getElementById("expand").addEventListener("click", function()
{
var displayDiv = document.getElementById('unhide');
var displayValue = (displayDiv.style.display === "block") ? "none" : "block";
this.innerHTML = (displayValue === "block") ? "Hide The Div" : "Show The Div";
displayDiv.style.display = displayValue;
});
Link reference: https://jsfiddle.net/pitchiahn/hctnvsz1/1/
use simple if-else control flow
document.getElementById("expand").addEventListener("click", function()
{
var elem = document.getElementById('unhide');
if(elem.style.display == "none") { elem.style.display = "block"; }
else { elem.style.display = "none"; }
});
You can use .toggle()
$('#buttonId').on('click', function(e){
$("#DivId").toggle();
$(this).toggleClass('class1')
});
.class1
{
color: orange;
}
use toggleClass() to toggle the class for the button
$('#buttonLogin').on('click', function(e){
$("#login_Box_Div").toggle();
$(this).toggleClass('class1')
});
.class1
{
color: orange;
}
document.getElementById("expand").addEventListener("click", function()
{
if(document.getElementById('unhide').style.display == 'block')
document.getElementById('unhide').style.display = 'none';
else
document.getElementById('unhide').style.display = 'block';
});
you can check the running snippet here
this is pure java script
var button = document.getElementById('button'); // Assumes element with id='button'
button.onclick = function() {
var div = document.getElementById('newpost');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
};
This worked very well for me, hope it can help someone else. it opens a hidden div in an absolute position and closes it with the same button or the button in the div.
I use it for menu functions.
<div id="myDiv6" style="border:1px solid;background: rgba(255, 255, 255,
0.9);display: none;position: absolute; top: 229px; left: 25%; z-
index:999;height: auto;
width: 500px;">
<h2 >menu item</h2>
what ever you want in the hidden div
<button style="cursor: pointer;border-radius: 12px;background-image: linear-
gradient(to right, red,yellow);font-size:16px;"
onclick="changeStyle6()">Close</button>
</div>
<br/>
<button style="cursor: pointer;border-radius: 12px;background-image: linear-
gradient(to right, red,yellow);font-size:16px;width: 125px;"
onclick="changeStyle6()">button text</button><br/>
<script type="text/javascript">
function changeStyle6(){
var element = document.getElementById("myDiv6");
if(element.style.display == "none") { element.style.display = "block"; }
else { element.style.display = "none"; }
}
</script>
This is probably very simple but I'm at a loss.
I have two anchors that toggle the display of their own div containers. Right now, you can have both div containers showing by clicking each button once. I would like only one div showing at a time.
So if you select button 1 to show div 1, then you select button 2, it will show div 2 but also hide div 1.
Here is my code:
<script type="text/javascript" language="JavaScript">
function ReverseDisplay(d)
{
if(document.getElementById(d).style.display == "none")
{ document.getElementById(d).style.display = "block"; }
else
{ document.getElementById(d).style.display = "none"; }
}
</script>
<a id="menus" href="javascript:ReverseDisplay('menuList')">Button 1</a>
<a id="reso" href="javascript:ReverseDisplay('resoList')">Button 2</a>
<p>Some content</p>
<div id="menuList" style="display:none;">Some content</div>
<div id="resoList" style="display:none;">Some content</div>
Give div's common class
<div id="menuList" class="content" style="display:none;">Some content 1</div>
<div id="resoList" class="content" style="display:none;">Some content 2</div>
And then hide all before showing specific:
function ReverseDisplay(d) {
[].slice.call(document.querySelectorAll('.content')).forEach(function(el) {
el.style.display = 'none';
});
var element = document.getElementById(d);
element.style.display = element.style.display == "none" ? "block" : "none";
}
Check the demo below.
function ReverseDisplay(d) {
[].slice.call(document.querySelectorAll('.content')).forEach(function(el) {
el.style.display = 'none';
});
var element = document.getElementById(d);
element.style.display = element.style.display == "none" ? "block" : "none";
}
.content {
padding: 10px;
background: #EEE;
}
<a id="menus" href="javascript:ReverseDisplay('menuList')">Button 1</a>
<a id="reso" href="javascript:ReverseDisplay('resoList')">Button 2</a>
<p>Some content</p>
<div id="menuList" class="content" style="display:none;">Some content 1</div>
<div id="resoList" class="content" style="display:none;">Some content 2</div>
A bit more digging and I found a solution:
<script type="text/javascript" language="JavaScript">
(function() {
var opened_element = null;
window.ReverseDisplay = function(d) {
var e = document.getElementById(d);
if (opened_element && opened_element !== e) {
opened_element.style.display = 'none';
}
if(e.style.display == 'block') {
e.style.display = 'none';
}
else {
e.style.display = 'block';
}
opened_element = e;
};
}());</script>
You could
function ReverseDisplay(d) {
var el = document.getElementById(d),
els = document.getElementsByClassName('list'),
c;
for (var i = 0; i < els.length; i++) {
c = els[i];
if (el == c) {
if (el.style.display == "block") {
el.style.display = "none";
} else {
el.style.display = "block";
}
} else {
c.style.display = "none";
}
}
}
.list {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="menus" href="javascript:ReverseDisplay('menuList')">Button 1</a>
<a id="reso" href="javascript:ReverseDisplay('resoList')">Button 2</a>
<p>Some content</p>
<div id="menuList" class="list">Some content 1</div>
<div id="resoList" class="list">Some content 2</div>
Here is jQuery for those that could use this:
function hideTarget(elem){
$(elem).hide();
}
function showTarget(elem, target, hideThis){
$(elem).click(function(){
$(target).show();
hideTarget(hideThis);
});
}
showTarget('#reso','#resoList','#menuList');
showTarget('#menus','#menuList','#resoList');
Here is the fiddle.
The below code snippet shows the invite code when I click "Invite Code". But how do I re-hide the invite code if the same link is clicked again? And can it be done where it cycles back and forth with subsequent clicks? I didn't write this code but merely modified it to my use. I am still very new to this type of thing. Thanks!
<style>
div.hide { display:none; }
div.show { text-align:center; }
</style>
<script type='text/javascript'>
function showText(show, hide) {
document.getElementById(show).className = "show";
document.getElementById(hide).className = "hide";
}
</script>
<br>
<font color="red">-</font>Home<font color="red"> / </font><a onclick="showText('text1')" href="javascript:void(0);">Invite Code</a>-</font>
<div id="text1" class="hide"><font color="red">abc123</font></div>
</center></h3>
Simply use this function:
function showText(id)
{
var elem = document.getElementById(id);
if(elem.style.display == 'none')
{
elem.style.display = 'inline';
}
else
{
elem.style.display = 'none';
}
}
<a onClick="showText('text1');" href="#">Show or Hide</a><br/>
<div style="height: 30px;"><div id="text1" style="display: none;">Text to hide or show... WTF?!</div></div>
<div>This text should not move.</div>
PS: This also works for 2 Elements...
Greetings
I really don't see the use for the show class. You could just toggle the hide class on the elements that you want to toggle.
Assume you dont need the show class, then use the classList.toggle function like this
function toggle(target){
document.getElementById(target).classList.toggle('hide');
}
.hide{ display:none }
<button onclick="toggle('test')">Show / Hide</button>
<div id="test" class="hide">Hello world!</div>
save the state with a boolean
var hided = true;
function showText(show,hide){
if (hided){
document.getElementById(show).className = "show";
document.getElementById(hide).className = "hide";
}
else{
document.getElementById(show).className = "hide";
document.getElementById(hide).className = "show";
}
hided = !hided;
}
fiddle with this code and some of your html : fiddle,
isn't it the expected behavior ?
<html>
<div ID="content" style="display:block;">This is content.</div>
<script type="text/javascript">
function toggleContent() {
// Get the DOM reference
var contentId = document.getElementById("content");
// Toggle
contentId.style.display == "block" ? contentId.style.display = "none" :
contentId.style.display = "block";
}
</script>
<button onclick="toggleContent()">Toggle</button>
</html>
//Code is pretty self explanatory.