toggle visibility multiple divs javascript - javascript

Afternoon guys, I am hoping you can help me put the finishing touches to this page. Basically I have four links - each of which will be linked to a different version of content - that will be displayed in the same 3 divs by way of togglevisibility. That is to say that onload, the first link’s content will be displayed (in the three divs) and then the aim is that when another of the four links is clicked, the visible content from the open link closes and the clicked link’s content opens instead. (One thing I have successfully avoided in the code I have so far - and am eager to avoid in the final model - is toggling the page to empty. That is to say if link1’s content is displayed and you click on link1 again, the content stays visible and does not simply toggle on and off.)
Now using the markup below I am oh so close (!) except for the following…
When the page loads the first link’s content is displayed as I want to be, but whenever you click one of the other 3 links it is only div1’s content that successfully loads while the other two divs become empty. I have attempted to alter the toggleVisibility coding (quite crudely I know!) so that each of the 4 links are dealt with as follows;
<a href=“#” onclick=“togglevisibility(‘link1div1’); togglevisibility(‘link1div2’);togglevisibility(‘link1div3’);”>Link 1</a>
Is there a way to fix this error from within the link line (above) so that clicking the link loads the corresponding content into all three divs and not just the first? I am sure it is something simple that I have overlooked or ill-coded!
Thanks very much for your time and advice in advance.
CSS
.section {display:none;}
#link1div1 {display:block;}
#link1div2 {display:block;}
#link1div3 {display:block;}
HTML
<a href=“#” onclick=“togglevisibility(‘link1div1’); togglevisibility(‘link1div2’);togglevisibility(‘link1div3’);”>Link 1</a>
<a href=“#” onclick=“togglevisibility(‘link2div1’); togglevisibility(‘link2div2’);togglevisibility(‘link2div3’);”>Link 2</a>
<a href=“#” onclick=“togglevisibility(‘link3div1’); togglevisibility(‘link3div2’);togglevisibility(‘link3div3’);”>Link 3</a>
<a href=“#” onclick=“togglevisibility(‘link4div1’); togglevisibility(‘link4div2’);togglevisibility(‘link4div3’);”>Link 4</a>
<div id=“div1”>
<div id=“link1div1” class=“section”></div>
<div id=“link2div1” class=“section”></div>
<div id=“link3div1” class=“section”></div>
<div id=“link4div1” class=“section”></div>
</div>
<div id=“div2”>
<div id=“link1div2” class=“section”></div>
<div id=“link2div2” class=“section”></div>
<div id=“link3div2” class=“section”></div>
<div id=“link4div2” class=“section”></div>
</div>
<div id=“div3”>
<div id=“link1div3” class=“section”></div>
<div id=“link2div3” class=“section”></div>
<div id=“link3div3” class=“section”></div>
<div id=“link4div3” class=“section”></div>
</div>
JS
<script type="text/javascript">
function toggleVisibility(selectedTab) {
var section = document.getElementsByClassName('section')
for(var i=0; i<section.length; i++) {
if(section[i].id == selectedTab) {
section[i].style.display = 'block';
} else {
section[i].style.display = 'none';
}
}
}
</script>

I would minimise the use of javascript and do that using css, like this:
DEMO HERE
javascript:
function clickHandler(lnk) {
document.getElementById('sections').className = lnk;
return false;
}
css:
#sections .section {display:none;}
#sections.link1 .link1,
#sections.link2 .link2,
#sections.link3 .link3,
#sections.link4 .link4 { display: block; }
html:
Link 1
Link 2
Link 3
Link 4
<div id="sections" class="link1">
<div id="div1">
<div id="link1div1" class="section link1">11</div>
<div id="link2div1" class="section link2">21</div>
<div id="link3div1" class="section link3">31</div>
<div id="link4div1" class="section link4">41</div>
</div>
<div id="div2">
<div id="link1div2" class="section link1">12</div>
<div id="link2div2" class="section link2">22</div>
<div id="link3div2" class="section link3">32</div>
<div id="link4div2" class="section link4">42</div>
</div>
<div id="div3">
<div id="link1div3" class="section link1">13</div>
<div id="link2div3" class="section link2">23</div>
<div id="link3div3" class="section link3">33</div>
<div id="link4div3" class="section link4">43</div>
</div>
</div>

The reason only one of those is showing is because when you run toggle visibility youre getting every element with the class section then toggling them all off except for the ONE that is called into the function. So when your onclick is done running youve turned on the first two then turned them off when you call the last one.
A simple fix would be to give each div in the big div a classname determining the link.
<div id=“div3”>
<div id=“link1div3” class=“section link1”></div>
<div id=“link2div3” class=“section link2”></div>
<div id=“link3div3” class=“section link3”></div>
<div id=“link4div3” class=“section link4”></div>
</div>
Do the same for the other divs. Then your links be like this ....
<a href=“#” onclick=“togglevisibility(‘link1’);>Link 1 </a>
Change your javascript to.
<script type="text/javascript">
function toggleVisibility(selectedClass) {
var turnOn = document.getElementsByClassName('selectedClass');
var allDivs = document.getElementsByClassName('section');
for(var i=0; i<section.length; i++) { //this for loop hides all the divs
section[i].style.display = 'none';
}
for(var i=0; i<turnOn.length; i++) { // this for loop shows the divs
turnOn[i].style.display = 'block'; // with the link1 class
}
}
</script>
This solution if it works (I havent been able to test) will also keep something on the page at all times which I saw you mentioned in bold in your post.

Related

javascript toggle showing and hiding several div elements

I have two divs on a page (id's MAY and JUNE) and two buttons on the page. The page startes off by showing the May div, with the June div hidden using css display: none
I am trying to create the correct javascript that will toggle between the two of them, but (after searching on here) I can only manage to get one to work.
Codepen showing issue is https://codepen.io/billteale/pen/zwBBez
<a href="#" id="button" >MAY</a>
<a href="#" id="button" >JUNE</a>
<!-- first div, shows on page load -->
<div id="MAY">
<div style="background-color: lightgrey"><h1 style="padding: 5px"><strong>May 2017</strong></h1>
</div>
<!-- second div, hidden originally -->
<div class="hidden" id="JUNE">
<div style="background-color: lightgrey"><h1 style="padding: 5px"><strong>June 2017</strong></h1>
</div>
...and the current js is
var button = document.getElementById('button'); // Assumes element with id='button'
button.onclick = function() {
var div = document.getElementById('MAY');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
};
Eventually I will have four or more divs to toggle between, with each button showing its relevant div, and hiding the others.
Can anybody tell me how to add to the code I have here to make this work for multiple elements?
It can be done by setting the div id's in the anchor tag's href attribute, and showing the corresponding div while hiding the rest. It can be done for any number of div's with no extra script, Just add the new div id to the new anchor tags href. You should give a common class to all the div's like month to select them all.
$("a.btn").click(function() {
var id = $(this).attr("href");
$("div.month:visible").hide();
$(id).show();
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
MAY
JUNE
<!-- first div, shows on page load -->
<div id="MAY" class="month">
<div style="background-color: lightgrey">
<h1 style="padding: 5px"><strong>May 2017</strong></h1>
</div>
</div>
<!-- second div, hidden originally -->
<div class="month hidden" id="JUNE">
<div style="background-color: lightgrey">
<h1 style="padding: 5px"><strong>June 2017</strong></h1>
</div>
</div>
First you add a "div-toggle" class to each one of the divs you want to toggle. After that, you bind click events on your buttons, firing a function which takes an identifier as argument.
The function will run through your divs and set the one that has the argument id as visible, and hide the others.
This way you can add more divs to be toggled. You just have to mark them with the "div-toggle" class, set their id's and create their respective buttons.
var divs = document.getElementsByClassName('div-toggle');
function toggle(id) {
for (var i = 0; i < divs.length; i++) {
var div = divs[i];
if (div.id == id)
div.style.display = 'block';
else
div.style.display = 'none';
}
}
<a href="#" onclick="toggle('MAY')" >MAY</a>
<a href="#" onclick="toggle('JUNE')" >JUNE</a>
<!-- first div, shows on page load -->
<div class="div-toggle" style="display:block;" id="MAY">
<div style="background-color: lightgrey">
<h1 style="padding: 5px"><strong>May 2017</strong></h1>
</div>
</div>
<!-- second div, hidden originally -->
<div class="div-toggle" style="display:none;" id="JUNE">
<div style="background-color: lightgrey">
<h1 style="padding: 5px"><strong>June 2017</strong></h1>
</div>
</div>
div.style.visibility = "hidden"
this will completely hide your div. I'm pretty sure this is what you are asking for
also instead of that you can make a separate function and add o'clock to div
<div onclick="nameoffunction()"></div>
the function can take in a parameter and each div on click function can have the parameter of its id
Your div were messed up! The snippet is working now with the help of jQuery.
$("#JUNE").hide();
$("#MAY").show();
$('#button-may').on("click", function() {
$("#JUNE").hide();
$("#MAY").show();
});
$('#button-june').on("click", function() {
$("#JUNE").show();
$("#MAY").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
MAY
JUNE
<!-- first div, shows on page load -->
<div id="MAY">
<div style="background-color: lightgrey">
<h1 style="padding: 5px"><strong>May 2017</strong></h1>
</div>
</div>
<!-- second div, hidden originally -->
<div class="hidden" id="JUNE">
<div style="background-color: lightgrey">
<h1 style="padding: 5px"><strong>June 2017</strong></h1>
</div>
</div>

JQuery hide() not persisting after hide event

I'm trying to hide a visible section then show a hidden section using JQuery .hide() and .show(). When the event fires (on clicking an image) it only hides the visible section momentarily, then becomes visible again with the previously hidden section now visible below the first visible section. Based on the docs I've read and some tutorials I've watched this shouldn't be happening.
HTML:
<div class="transition-div">
<section class="project-section">
<div class="project-wrapper" id="project-one">
<div class="desc-text">
<h2>Header</h2>
</div>
<div class="project-image-wrapper">
<img class="project-image" id="project-img-one" src="images/img1.png">
<button class="project-button">Button
</button>
</div>
</div>
</section>
<section class="project-section hidden">
<div class="project-wrapper">
<div class="desc-text">
<h2>Header</h2>
<p>Some description text</p>
</div>
<div class="project-image-wrapper">
<img class="project-image" src="images/img1.png">
</div>
</div>
</section>
</div>
JS:
$('.hidden').hide();
var slideSection = function() {
$('.project-image-wrapper').click(function() {
var $parentDiv = $(this).parents('.transition-div');
var $childToShow = $parentDiv.find('.hidden');
var $childToHide = $childToShow.siblings('.project-section');
$childToHide.hide(300, hideActiveSection());
function hideActiveSection() {
$childToHide.addClass('hidden');
$childToShow.show(300, function() {
$(this).removeClass('hidden');
});
}
});
};
slideSection();
How would I get the section I want to hide to do so persistently until I click the currently visible project image to show it? Could my CSS be interfering with what I want to do here? If so I'll post the code. Thanks!

Jquery if div hasClass do something with a other div

Here is my problem (besides the fact that i'm a beginnen with javascript). I am building a page that wil load ajax content into a HTML page with a tab plugin. We need to build one page only which has to carry loads of content. Everything is working fine but we need to have little enhancement that uses javascript.
The first set are the tabs (ul.tabs) the second set are the content placeholders (div.panel-container) the third set is a layer popup (div#popup)
<div id="ajax-tab-container" class='tab-container'>
<ul class='tabs'>
<li class='tab'>one</li>
<li class='tab'>two</li>
<li class='tab'>three</li>
</ul>
<div class='panel-container'>
<div id="one" class="active"></div>
<div id="two"></div>
<div id="three"></div>
</div>
<div id="#popup">
<div class="one-ph">Content</div>
<div class="two-ph">Content</div>
<div class="three-ph">Content</div>
</div>
Now based on which tab is active the current scripts set the active status. Now what i need to do is create a script that checks (hasClass) which div within the .panel-container hasClass "active". But then it should addClass to the div within div#popup. But they have to match.
So if div#one hasClass "active" then addClass to div.one-ph,
if div#two hasClass "active" then addClass to div.two-ph etc.
Now in this example there are only three but the finished document will have about 20. kan somebody help me create this, i tried almost every example but is does not work. Also this is not a click function but a function that should work probably on document ready.
Please help this desperate guy
UPDATED
Fiddle
jQuery(document).ready(function() {
jQuery('.panel-container > div.active').each(function() {
var id = jQuery(this).attr('id');
var target = '.' + id + '-ph';
jQuery(target).addClass('active');
});
jQuery('ul.tabs > li.tab a').click(function(e) {
e.preventDefault();
var target = jQuery(this).attr('data-target');
var targetPopup = '.' + target.replace('#', '') + '-ph';
jQuery('.panel-container .active, #popup .active').removeClass('active');
jQuery(target).addClass('active');
jQuery(targetPopup).addClass('active');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ajax-tab-container" class='tab-container'>
<ul class='tabs'>
<li class='tab'>one</li>
<li class='tab'>two</li>
<li class='tab'>three</li>
</ul>
<div class='panel-container'>
<div id="one" class="active"></div>
<div id="two"></div>
<div id="three"></div>
</div>
<div id="popup">
<div class="one-ph">Content</div>
<div class="two-ph">Content</div>
<div class="three-ph">Content</div>
</div>
</div>

Show / Hide child DIVs on click on the main DIV, similar to spoiler (pure JS)

I have 20 rows of DIVs. The initial state hides all spoilers and is like below (I show the first 3 rows here):
<div class="main" onClick="showHide()">
some text 1
<div class="spoiler hide">spoiler</div>
</div>
<div class="main" onClick="showHide()">
some text 2
<div class="spoiler hide">spoiler 2</div>
</div>
<div class="main" onClick="showHide()">
some text 3
<div class="spoiler hide">spoiler 3</div>
</div>
etc..
CSS:
<style>
.main{background:silver;padding:1em;margin-bottom:1em}
.hide{display:none}
.show{display:block}
</style>
My goal is to manipulate/change the spoiler classes after user clicks on the "main" DIV. That is, after clicking on one of the "main" DIVs the "spoiler hide" class should automatically change to "spoiler show" so that the text is shown. And when user clicks on another "main" DIV, all 'spoiler show' classes should change to 'spoiler hide' and only the currently clicked "main" DIV should apply the 'spoiler show' class.
So it's basically like a toggle where only one (the last clicked) DIV shows the spoiler. I hope to find the simplest/fastest solution (JS in one line would work too).
I tried to use some JS function like below, but cannot make it work. I also read that 'document.querySelectorAll' might be used somehow.. I cannot use jQuery here.
<script>
function showHide() {
var e = document.getElementsByClassName('spoiler hide');
for(i=0; i<e.length; i++) {
e[i].className ='spoiler show';
}
}
</script>
Try this:
<script>
function showHide(sender) {
var e = sender.getElementsByClassName('spoiler hide');
for(i=0; i<e.length; i++)
{
e[i].className ='spoiler show';
}
}
</script>
<div class="main" onclick="showHide(this)">
some text 1
<div class="spoiler hide">spoiler</div>
</div>
<div class="main" onClick="showHide(this)">
some text 2
<div class="spoiler hide">spoiler 2</div>
</div>
<div class="main" onClick="showHide(this)">
some text 3
<div class="spoiler hide">spoiler 3</div>
</div>
Working fiddle here: http://jsfiddle.net/t0shq84f/

When div is clicked - slidetoggle other div

I have a problem with my jQuery code, I want the page to slideToggle one div ones the other is clicked, the problem is that I don't want to write all the code again and again so I tried to create a code that works all the time, but I'm stuck. Box is the div which should be clicked and it should contain a class that's also used on the div that's gonna slideToggle. It should pull the class from the tab and then use it to slideToggle the right object. Please help :S (the elements are not placed close to each other which makes next or children not possible). If you have any questions - ASK!
The jQuery code of mine:
$(".box").click(function() {
var Klassen = $(this).attr("class");
$("Klassen").slideToggle(300);
});
HTML:
<!-- These should be clicked -->
<div data-toggle-target="open1" class="box ft col-lg-3">
<div class="mer">
Läs mer
</div>
<div class="bild"><img src="images/sakerhet.jpg"></div>
<h4>HöstlovsLAN</h4>
</div>
</a>
<div data-toggle-target="open2" class="box st col-lg-3">
<div class="mer">
Läs mer
</div>
<div class="bild"><img src="images/sakerhet.jpg"></div>
<h4>NyårsLAN</h4>
</div>
<div data-toggle-target="open3" class="box tt col-lg-3">
<div class="mer">
Läs mer
</div>
<div class="bild"><img src="images/sakerhet.jpg"></div>
<h4>Säkerhet</h4>
</div>
<!-- These should be toggled -->
<div class="infobox" id="open1">
<h1>HöstlovsLAN</h1>
</div>
<div class="infobox" id="open2">
<h1>NyårsLAN</h1>
</div>
<div class="infobox" id="open3">
<h1>Säkerhet</h1>
</div>
EDIT - NEW PROBLEM - STILL AIN'T WORKING!
The code didn't work in my situation and would like you to take a look at the JS-fiddle I created:
http://jsfiddle.net/Qqe89/
undefined has presented the solution.
I would warn you about using this approach, if you add any classes to the .box div then your code will break.
Instead consider using data attributes to target the div to be toggled:
<div data-toggle-target="open1" class="box green"></div>
<div id="open1">
Opens
</div>
Which can then target with
$('.box').click(function (e) {
$( '#' + $(this).data('toggleTarget') ).slideToggle(300);
});
jsFiddle with example using your html - crudely formatted sorry!
$(".box").click(function() {
var Klassen = $(this).attr("class");
$("."+Klassen).slideToggle(300);
});
class attribute may contain several classes ($(this).attr("class") OR this.className)
$("."+Klassen) will not work if there are several classes
"Klassen" does not correspond to any DOM element as there is no such tag in HTML.

Categories