jquery how to only have 1 active toggle at a time? - javascript

I'm making a website that requires me to have 18 icons of which, each icon has its own assign div that is hidden, and once pressed the hidden Div slides down and shows below the icon. These icons have to be in a different Div from the content I want to hide/show.
I'm using Elementor on wordpress since I'm really ignorant when it comes to webdesign and programing,
I've found this jquery that I'm using to show and hide Div when I click on icons.
I've assign the icons as .showBlock1 .ShowBlock2 .ShowBlock3 etc and the Divs as .hiddenBlock1 .hiddenBlock2 .hiddenBlock3 etc... and it works how I want except that I only want 1 active at a time, so that if I press icon1, it shows Div1 and then if I press icon2, it hides Div1 and shows Div2 and so on.
jQuery(document).ready(function( $ ){
var hbtn = $(".showBlock");
var hcon = $(".hiddenBlock");
hcon.hide();
hbtn.click(function(e) {
var index = hbtn.index(this)
$(hcon).eq(index).slideToggle("slow");
e.preventDefault();
});
});
jQuery(document).ready(function( $ ){
var hbtn = $(".showBlock2");
var hcon = $(".hiddenBlock2");
hcon.hide();
hbtn.click(function(e) {
var index = hbtn.index(this)
$(hcon).eq(index).slideToggle("slow");
e.preventDefault();
});
});
Since I'm really ignorant to coding I've been just repeating the script and changing the numbers on the class .showBlock and .hiddenBlock.

Maybe the following is helpful to you?
$(function(){
var hbtn = $(".showBlock");
var hcon = $(".hiddenBlock");
hcon.hide();
hbtn.click(function(e) {
var curr=hcon.eq(hbtn.index(this));
hcon.not(curr).hide();
curr.slideToggle("slow");
e.preventDefault();
});
});
.cont1 {height:50px}
.hiddenBlock {display: inline-block; width:60px; height: 40px; background-color:#ccc}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cont1">
<div class="hiddenBlock">1</div>
<div class="hiddenBlock">2</div>
<div class="hiddenBlock">3</div>
<div class="hiddenBlock">4</div>
<div class="hiddenBlock">5</div>
<div class="hiddenBlock">6</div>
</div>
<div>
<button class="showBlock">show 1</button>
<button class="showBlock">show 2</button>
<button class="showBlock">show 3</button>
<button class="showBlock">show 4</button>
<button class="showBlock">show 5</button>
<button class="showBlock">show 6</button>
</div>
A button click will at first hide all visile .hcon elements and will then .slideToggle the one corresponding to the button position.
Edit
After having had a look at your web page I can simplify your structure as shown below:
jQuery(function($){
const btns=$("div.showBlock");
const scts=$("section.hiddenBlock");
$("section").on("click","div.showBlock",function(){
let curr=scts.eq(btns.index(this));
scts.not(curr).hide();
curr.toggle();
});
})
.showBlock {display: inline-block; background-color:#ccc;
width:50px; margin:2px;padding:6px}
.hiddenBlock {background-color:#eea; width:192px; padding:6px; margin-top:8px}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
...
<section
class="... elementor-element-51eaf85 ..." data-id="51eaf85" data-element_type="section">
<div class="elementor-container elementor-column-gap-no">
<div class="elementor-column ... elementor-element-1a773d0 showBlock" ...>
one
</div>
<div class="elementor-column ... elementor-element-6b9441a showBlock" ...>
two
</div>
<div class="elementor-column ... elementor-element-ce4f2d4 showBlock" ...>
three
</div>
</div>
</section>
<section class="... elementor-element-fc98ed1 hiddenBlock ..." data-id="fc98ed1" style="">first section</section>
<section class="... elementor-element-cf64eb5 hiddenBlock ..." data-id="cf64eb5" style="display: none;">second section</section>
<section class="... elementor-element-f16da07 hiddenBlock ..." data-id="f16da07" style="display: none;">third section</section>
...
The HTML structure there is an excerpt from the page. I removed a few class attributes to improve the readability and added a little makeshift CSS to make it "presentable".
On top of that I unified your classes "showBlock1", "showBlock2", "showBlock3" to "showBlock" and "hiddenBlock", "hiddenBlock2", "hiddenBlock3" to "hiddenBlock".
Have a look at it and play around with it ...

Related

Select interact to a specific html element with a button

I have a few buttons in the HTML file code with Bulma similar like this:
<a class="button" data-target="A">Section A</a>
<a class="button" data-target="B">Section B</a>
<a class="button" data-target="C">Section C</a>
And there are a few section like this which can interact with the buttons:
<div id="A" class="contentswitch">
<article class="message">
<div class="message-header" id="h1">
<p>Section A-1</p>
</div>
<div class="message-body">
Message 1 of section A
</div>
<div class="message-header">
<p>Section A-2</p>
</div>
<div class="message-body">
Message 2 of section A
</div>
</article>
</div>
As I add code like this in the JS, it can add a class called "is-hidden" to all the div ejectment which contains "contentswitch" class.
$("a.button").on("click", function(){
$("div.contentswitch").addClass("is-hidden");
});
What can I do if I want to remove the class ("is-hidden") from specific div element, like if I click the button of Section A, then it add "is-hidden" class to all the div element contain content switch then remove it from the div element with the id "A"?
Thank you so much
You can use data-target to connect the clicked button to the div you want to show. And hide the rest of them.
Also, use button iso a tag. a tag has a specific purpose in HTML and should be used only in combination with href attribute.
const buttons = $('.button');
const contentSwitchDivs = $('.contentswitch');
buttons.on("click", function(){
const btnTarget = $(this).data('target')
const contentToShow = $(`#${btnTarget}`)
contentSwitchDivs.not(btnTarget).hide();
contentToShow.show();
});
.contentswitch {
display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="button" data-target="A">Section A</button>
<button class="button" data-target="B">Section B</button>
<button class="button" data-target="C">Section C</button>
<div id="A" class="contentswitch">
A contentswitch
</div>
<div id="B" class="contentswitch">
B contentswitch
</div>
<div id="C" class="contentswitch">
C contentswitch
</div>

JQuery - Add class on click verifying ID

I'm trying to add a class to a specific element that contains a parent container with a unique ID.
I have several buttons contained in a div, and all of them are using the same classes. For some reason, I can't use only $(this), so I created a loop that adds a unique ID to the containers.
HTML
<div class='section'>
<div class='btn-container' id='btn-1'>
<button class='btn'></button>
</div>
<div class='btn-container' id='btn-2'>
<button class='btn'></button>
</div>
<div class='btn-container' id='btn-3'>
<button class='btn'></button>
</div>
</div>
JQuery
$("button").click(function (e) {
e.preventDefault();
var target = $(e.target).parents(".button-container").attr("id");
console.log(target);
$(target).find(".btn").addClass("active");
});
I'm targeting the ID and it works, the console.log gives me back the correct info. However, for some reason, I can't add the class.
Thank you in advance for any help! (:
Edited:
I'm trying to add the class active to the button that is contained in the ID.
Example:
$("#btn-1 .btn").addClass("active"); but with the ID dynamically populate based on the info from the click.
Keep things simple, this should work
$(document).ready(function() {
$("button").click(function (e) {
e.preventDefault();
$(e.target).addClass("active")
});
});
.active{
border: 1px red solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='section'>
<div class='btn-container' id='btn-1'>
<button class='btn'>Test</button>
</div>
<div class='btn-container' id='btn-2'>
<button class='btn'>Test</button>
</div>
<div class='btn-container' id='btn-3'>
<button class='btn'>Test</button>
</div>
</div>

Simplify multi toggle divs

I would like to simplify the code by not typing each div (#TopicA, #TopicB, #main, etc.) ID that is to be collapsed when an option is selected.
I would like all the divs besides the ones that trigger the button to automatically collapse. How can I make this happen?
Example: When I click TopicA1, I want to collapse all other divs, but I dont want to put all div IDs in JS code.
Demo: JSFiddle
<div id="main" class="QA">
<h2>Title</h2>
<h3>Subtitle</h3>
<button class="ClassButtonA">Topic A</button>
<button class="ClassButtonB">Topic B</button>
<button class="ClassButtonC">Topic C</button>
</div>
<div id="TopicA" class="QA">
<h2>XX</h2>
<button class="ClassButtonA1">Topic A1</button>
</div>
$(".ClassButtonA").click(function() {
$("#TopicA").toggle("slow").trigger('reset');
});
$(".ClassButtonA").click(function() {
$("#TopicB, #TopicC, #main").slideUp("slow").trigger("reset");
A single function handles the toggle, and hides all siblings to the currently displayed div. Note that I did modify your structure some -- the content pane div now contains all the divs I wish to show/hide, thus leaving the button pane displaying. Hope it helps!
// Event handler for click on any button el
$(".QA button").click(function() {
// The text of the button matches the id
// of the div els, if I strip spaces.
var toggleThis = "#" + $(this).text().replace(/\s/g, '')
// Using the given string above, toggle that
// div el, and hide all siblings to that.
$(toggleThis).show("slow").trigger('reset').siblings().hide("slow").trigger('reset');
});
.QA {
font: normal normal 14px/1 Helvetica;
margin: 1px;
border-radius: 10px;
text-align: center;
}
#TopicA,
#TopicB,
#TopicC,
#TopicA1 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main" class="QA">
<h2>Title</h2>
<h3>Subtitle</h3>
<button class="ClassButtonA">Topic A</button>
<button class="ClassButtonB">Topic B</button>
<button class="ClassButtonC">Topic C</button>
</div>
<div class="content-pane">
<div id="TopicA" class="QA">
<h2>XX</h2>
<button class="ClassButtonA1">Topic A1</button>
</div>
<div id="TopicA1" class="QA">
<h2>123</h2>
</div>
<div id="TopicB" class="QA">
<h2>YY</h2>
</div>
<div id="TopicC" class="QA">
<h2>ZZ</h2>
</div>
</div>

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!

Categories