Why aren't my classes being added on button click? - javascript

I'm not the best at JavaScript but hope that someone can help me with this.
What i want is that when you press on the one of the buttons, the button gives the div the class open.
I have multiple buttons, so what i mean by this is click on button, button gives content1 the class open, when you press on one of the other buttons the class of that div will be gonna and assign on the other div that button was linked to and so on.
What I now get is that all the open divs stay at the class and didn't get removed. I have tried multiple things like search on google or use other technics but nothing works..
const content1 = document.querySelector('.content1');
const content2 = document.querySelector('.content2');
const content3 = document.querySelector('.content3');
var dn = document.querySelector('.dn');
const one = document.querySelector('.one');
const two = document.querySelector('.two');
const three = document.querySelector('.three');
one.addEventListener('click', () => {
if (dn.classList.contains('open')) {
dn.classList.remove('open');
} else {
content1.classList.add('open');
}
})
two.addEventListener('click', () => {
if (dn.classList.contains('open')) {
dn.classList.remove('open');
} else {
content2.classList.add('open');
}
})
three.addEventListener('click', () => {
if (dn.classList.contains('open')) {
dn.classList.remove('open');
} else {
content3.classList.add('open');
}
})
.dn {
display: none;
}
.open {
display: block;
}
<div id="mainBOX" class="mainBOX">
<button class="btn one">btn1</button>
<button class="btn two">btn2</button>
<button class="btn three">btn3</button>
<div class="dn content1">
<h1>Lorem Ipsum</h1>
</div>
<div class="dn content2">
<h1>Lorem Ipsum2</h1>
</div>
<div class="dn content3">
<h1>Lorem Ipsum3</h1>
</div>
</div>

If you you are trying to make sure that the current clicked item becomes open, you need to first make sure you close all the existing elements matching .dn. Your code was only addressing the first one.
Your code was never removing the open from any of the divs.
Lastly, two things that will improve your code greatly:
Event delegation: so that you only need a single handler
Using data attributes to associate buttons with their divs (someone else suggested using index which is OK but most people try to stay away from parallel arrays)
document.getElementById('mainBOX').addEventListener('click', (e)=> {
// Ignore clicks not on buttons
if (e.target.tagName !== 'BUTTON') {
return;
}
// Close all divs
Array.from(document.querySelectorAll('.dn')).forEach(
dn => dn.classList.remove('open')
);
// Open the current one
document.querySelector('.' + e.target.dataset.for).classList.add('open');
});
.dn {
display: none;
}
.open {
display: block;
}
<div id="mainBOX" class="mainBOX">
<button data-for="content1" class="btn">btn1</button>
<button data-for="content2" class="btn">btn2</button>
<button data-for="content3" class="btn">btn3</button>
<div class="dn content1">
<h1>Lorem Ipsum</h1>
</div>
<div class="dn content2">
<h1>Lorem Ipsum2</h1>
</div>
<div class="dn content3">
<h1>Lorem Ipsum3</h1>
</div>
</div>

I'd just target your divs by index:
$('.btn').click(function() {
// get the zero-based index of the clicked element
let index = $(this).index();
// hide all divs inside the container and remove the 'open' class
$('#mainBOX div').hide().removeClass('open');
// show just the div with the right index and add the 'open' class
$('#mainBOX div').eq(index).show().addClass('open');
});
.dn {
display: none;
}
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
crossorigin="anonymous"></script>
<div id="mainBOX" class="mainBOX">
<button class="btn one">btn1</button>
<button class="btn two">btn2</button>
<button class="btn three">btn3</button>
<div class="dn content1">
<h1>Lorem Ipsum</h1>
</div>
<div class="dn content2">
<h1>Lorem Ipsum2</h1>
</div>
<div class="dn content3">
<h1>Lorem Ipsum3</h1>
</div>
</div>
To summarize:
Use DOM traversal to target elements rather than specific class names
Use class names to identify sets of like elements
Don't bother with classes to toggle visibility (unless you want elaborate animations)
If using jQuery, familiarize yourself with the common methods it provides so you aren't reinventing wheels
Rather than separate classes for open and not open, just make one the default and apply the other
Don't Repeat Yourself in your code

I have shortened your code using the forEach() method and the toggle() method for each content.
Was it necessary?
const btn = document.querySelectorAll('.btn');
const content = document.querySelectorAll('.dn');
Array.from(btn).forEach(function(btnArray, i) {
btnArray.addEventListener('click', function() {
content[i].classList.toggle('open');
});
});
.dn {
display: none;
}
.open {
display: block;
}
<div id="mainBOX" class="mainBOX">
<button class="btn one">btn1</button>
<button class="btn two">btn2</button>
<button class="btn three">btn3</button>
<div class="dn content1">
<h1>Lorem Ipsum</h1>
</div>
<div class="dn content2">
<h1>Lorem Ipsum2</h1>
</div>
<div class="dn content3">
<h1>Lorem Ipsum3</h1>
</div>
</div>

Take a look at this. Use a forEach function to handle the click event in all buttons with a specific class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hide and show</title>
<style>
.dn {
display: none;
}
.btn {
margin-right: 10px;
}
.open {
display: block;
}
</style>
</head>
<body>
<!-- Sample with three contents -->
<div id="c1" class="dn content">
<h1>Content 1</h1>
</div>
<div id="c2" class="dn content">
<h1>Content 2</h1>
</div>
<div id="c3" class="dn content">
<h1>Content 3</h1>
</div>
<!-- Sample with three buttons -->
<button id="btn1" class="action-btn">Button 1</button>
<button id="btn2" class="action-btn">Button 2</button>
<button id="btn3" class="action-btn">Button 3</button>
<button id="clean" class="action-btn">Limpiar</button>
<script>
const buttons = document.querySelectorAll(".action-btn");
const contents = document.querySelectorAll(".content");
buttons.forEach(function (item) {
item.addEventListener("click", function (e) {
if (item.id === "clean") {
contents.forEach((item) => item.classList.remove("open")); // Clean all the open classes
} else {
contents.forEach((item) => item.classList.remove("open"));
switch (item.id) {
case "btn1":
const c1 = document.getElementById("c1");
if (!c1.classList.contains("open")) {
c1.classList += " open";
}
break;
case "btn2":
const c2 = document.getElementById("c2");
if (!c2.classList.contains("open")) {
c2.classList += " open";
}
break;
case "btn3":
const c3 = document.getElementById("c3");
if (!c3.classList.contains("open")) {
c3.classList += " open";
}
break;
}
}
});
});
</script>
</body>
</html>

OK, I rewrote my contribution from scratch, as I did not read OP requirements properly at first.
Undoubtedly, #isherwood's answer should be the accepted one here, as it uses the index of the clicked button and because it uses jQuery which makes the script so much more easy to read!
However, in my contribution I would like to show that the same is also possible without jQuery. Admittedly, it gets a little more complicated:
The whole action happens within an IIFE ((function(){...})()) to keep the global name space clean. mBox is the #mainBox DOM element to which I attach the delegated click event for all BUTTONs.
Every time the click event handler is fired it collects all the buttons in mBox in the array btns (the [...mBox.SelectorAll()] construct is necessary to create a JavaScript Array from the collection that is returned by .querySelectorAll()).
odiv is the (potentially) open div from a previous operation that needs to be closed again by removing the class open from it.
Eventually the open class gets added to the div with the same index as the clicked button in the line
mBox.querySelectorAll('div')[btns.indexOf(ev.target)].classList.add('open');
By using delegated event listening and by cheching the available buttons and divs after each click it is possible to dynamically add buttons and divs to the page without having to attach event listeners to these elements.
(function(){
const mBox=document.getElementById('mainBOX');
mBox.onclick=ev=>{
const btns=[...mBox.querySelectorAll('button')];
if (ev.target.tagName=="BUTTON"){
let odiv=mBox.querySelector('div .open')
if (odiv) odiv.classList.remove('open');
mBox.querySelectorAll('div')[btns.indexOf(ev.target)].classList.add('open');
}
}
})()
.dn { display: none; }
.open { display: block;}
<div id="mainBOX" class="mainBOX">
<button class="btn one">first </button>
<button class="btn two">second</button>
<button class="btn three">third</button>
<button class="btn four">fourth</button>
<button class="btn five">fifth</button>
<button class="btn six">sixth</button>
<button class="btn seven">seventh</button>
<button class="btn eight">eighth</button>
<button class="btn nine">nineth</button>
<button class="btn ten">tenth</button>
<div class="dn content1">
<h1>Lorem Ipsum</h1>
</div>
<div class="dn content2">
<h1>Lorem Ipsum2</h1>
</div>
<div class="dn content3">
<h1>Lorem Ipsum3</h1>
</div>
<div class="dn content4">
<h1>Lorem Ipsum4</h1>
</div>
<div class="dn content5">
<h1>Lorem Ipsum5</h1>
</div>
<div class="dn content6">
<h1>Lorem Ipsum6</h1>
</div>
<div class="dn content7">
<h1>Lorem Ipsum7</h1>
</div>
<div class="dn content8">
<h1>Lorem Ipsum8</h1>
</div>
<div class="dn content9">
<h1>Lorem Ipsum9</h1>
</div>
<div class="dn content10">
<h1>Lorem Ipsum10</h1>
</div>
</div>

Related

Display none some content and block one element

I would like to make 3 buttons with each one make all the content div to display: none and depending on the button you have click one of the content div change to display: block. For example, If I click on the second button It will show only the second div content.
function showPanel(id) {
var elements = document.getElementsByClassName("content");
for (let i = 0; i < elements.length; i++) {
document.getElementById(i).style.display = "none";
}
document.getElementById(id).style.display = "block";
}
<button onclick="showPanel('1')">test1</button>
<button onclick="showPanel('2')">test2</button>
<button onclick="showPanel('3')">test3</button>
<div class="content">
<div id="1" class="content">
<p>TEST1</p>
</div>
<div id="2" class="content">
<p class="other">TEST2</p>
</div>
<div id="3" class="content ">
<p class="other">TEST3</p>
</div>
</div>
There's a couple of issues in your code. Firstly length is a property, not a method, so you don't need the () suffix to invoke it. Secondly, there's no className attribute in HTML. This should just be class. Lastly the parent container shares the same class as the elements you're hiding, so all the child elements get hidden, even if they have display: block applied to them.
With these issues corrected, your code would look like this:
function showPanel(id) {
var elements = document.getElementsByClassName("panel");
for (let i = 0; i < elements.length; i++) {
elements[i].style.display = "none";
}
document.getElementById(id).style.display = "block";
}
<button onclick="showPanel('p1')">test1</button>
<button onclick="showPanel('p2')">test2</button>
<button onclick="showPanel('p3')">test3</button>
<div class="content">
<div id="p1" class="panel">
<p>TEST1</p>
</div>
<div id="p2" class="panel">
<p class="other">TEST2</p>
</div>
<div id="p3" class="panel">
<p class="other">TEST3</p>
</div>
</div>
However it's worth noting that using onX attributes is outdated and not good practice. A better solution would be to use unobtrusive event handlers and provide custom metadata to the event handler through data attributes placed on the elements.
The improved version of the logic would look like this:
let buttons = document.querySelectorAll('button');
let panels = document.querySelectorAll('.panel');
buttons.forEach(button => {
button.addEventListener('click', e => {
panels.forEach(panel => {
panel.style.display = panel.id === e.target.dataset.panel ? 'block' : 'none';
});
});
});
<button data-panel="1">test1</button>
<button data-panel="2">test2</button>
<button data-panel="3">test3</button>
<div class="content">
<div id="1" class="panel">
<p>TEST1</p>
</div>
<div id="2" class="panel">
<p class="other">TEST2</p>
</div>
<div id="3" class="panel">
<p class="other">TEST3</p>
</div>
</div>
No need for JS or Jquery. Instead of a button you can use an anchor tag. Then you calling with the anchor the id of the element. Last but not least you make the boxes hidden through CSS and use the :target selector to display the elements:
.content {
display: none;
}
.content:target {
display: block;
}
test1<br>
test2<br>
test3<br>
<div class="content-container">
<div id="1" class="content">
<p>TEST1</p>
</div>
<div id="2" class="content">
<p class="other">TEST2</p>
</div>
<div id="3" class="content ">
<p class="other">TEST3</p>
</div>
</div>
Multiple issues.
Length can be calculated using elements.length and not elements.length()
You have given same class name to both the parent and the child divs. So hiding all elements with class name content will hide your whole parents itself. So after updating style.display = "block" to the required target, it will not work. Because your parent is already style.display = "none". So you should make a logic update there. So I changed the parent class name.
function showPanel(id) {
var elements = document.getElementsByClassName("content");
for (let i = 0; i < elements.length; i++) {
elements[i].style.display = "none";
}
document.getElementById(id).style.display = "block";
}
<button onclick="showPanel('1')">test1</button>
<button onclick="showPanel('2')">test2</button>
<button onclick="showPanel('3')">test3</button>
<div>
<div id="1" class="content">
<p>TEST1</p>
</div>
<div id="2" class="content">
<p class="other">TEST2</p>
</div>
<div id="3" class="content ">
<p class="other">TEST3</p>
</div>
</div>
A more elegant way I might approach a prob,problem like this would be to tie the panels and their triggers together using data-attributes. This way, you don't risk conflicts with other IDs that m ay be the same on the page (IDs should always be unique).
Before setting up my event listener, I would initialize an openPanel variable and set it to any panel that is already created with the active class name. Whenever we open a new panel, we will overwrite this variable vaklue, so we don't need to do a new querySelctor each time.
Then, in the CSS, rather than hiding all panels and then showing the one with the active class, we can write a single style that hides any panels without the active class using the :not negation selector.
This is how that would look (initializing this with panel #1 open by default, but you can simply remove the active class from it in the HTML if you don't want that):
let openPanel = document.querySelector('[data-panel-id].active');
document.addEventListener('click', e => {
if (e.target?.matches?.('[data-panel-target]')) {
const id = e.target.dataset.panelTarget;
if (id) {
const panel = document.querySelector(`[data-panel-id="${id}"]`);
if (panel) {
openPanel?.classList.remove('active');
panel.classList.add('active');
openPanel = panel;
}
}
}
})
[data-panel-id]:not(.active) {
display: none;
}
<button data-panel-target="1">test1</button>
<button data-panel-target="2">test2</button>
<button data-panel-target="3">test3</button>
<main>
<div data-panel-id="1" class="active">
<p>TEST #1</p>
</div>
<div data-panel-id="2">
<p>TEST #2</p>
</div>
<div data-panel-id="3">
<p>TEST #3</p>
</div>
</main>
I already submitted a separate solution with my preferred recommendation, but I wanted to provide an answer to your question using the same approach you started with so as not to deviate from the code you already have in place.
The code you already had in place was actually fairly close to working already. The main issue I saw was that you were using document.getElementById(i) where you should actually have been using elements[i]. We can improve this further though, by replacing the for loop with a for..of loop, and determining inline whether the current element being evaluated is the one we want to show. If so, we use 'block', otherwise 'none'.
After initializing our function, we can call it on one of our IDs within the JS to have one panel open by default. **It's also important that the parent of all these .content elements NOT contain the class name content as well, as that would conflict with your function. I have replaced that parent element with a simple <main>…</main> element.
Here is how I would achieve solving this using your existing approach:
function showPanel(contentId) {
const elements = Array.from(document.getElementsByClassName('content'));
for (const element of elements) {
element.style.display = element.id === contentId ? 'block' : 'none';
}
}
showPanel('1');
<button onclick="showPanel('1')">test1</button>
<button onclick="showPanel('2')">test2</button>
<button onclick="showPanel('3')">test3</button>
<main>
<div id="1" class="content">
<p>TEST1</p>
</div>
<div id="2" class="content">
<p>TEST2</p>
</div>
<div id="3" class="content ">
<p>TEST3</p>
</div>
</main>

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

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 ...

using javascript to toggle the display of other divs within the main div

The click of the button should toggle the visibility of that corresponding button's div. the first pic is what the code should look like from the start, and the second pic shows what the code should look like after clicking the submit button 1.
.toggleDiv{
background: gray;
max-width: 400px;
}
<!DOCTYPE html>
<html>
<script src="script.js"></script>
<link rel="stylesheet" href="styles.css">
<body>
<div class="toggleNav">
<div class="Button1">
<input onclick="toggleMain" type="image" src="images/vinylBtn.png">
Button1
</div>
<div class="Button2">
<input onclick="toggleMain" type="image" src="images/cdBtn.png">
Button2
</div>
<div class="Button3">
<input onclick="toggleMain" type="image" src="images/tapeBtn.png">
Button3
</div>
</div>
<div class="toggleDiv">
<div id="mainText">
<h2>main div</h2>
<p>This is where the different divs shouls be toggling
</div>
<div id="Button1">
<p>This is the first div</p>
</div>
<div id="Button2">
<p>This is the second div</p>
</div>
<div id="Button3">
<p>This is the third div</p>
</div>
</div>
</body>
</html>
You can find all you elements by tag a in toggleNav and then add event listener. See my example in playground https://jsfiddle.net/denisstukalov/ompaeL0d/29/:
const links = document.querySelectorAll("div.toggleNav div a");
for (var i = 0; i < links.length ; i++) {
const divId = links[i].innerText
links[i].addEventListener("click",
function (event) {
event.preventDefault();
document.getElementById(divId).style.display = 'block';
},
false);
}

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>

Click button, show div content, hide others - JS

I'm trying to create a list of buttons that when one is clicked it displays that DIV and hides the rest. There is also a default message that shows before any button is clicked.
I've created a codepen already and I think there is something wrong with my script, but I can't work out what I am doing wrong. Any help?
Here is the script I am trying:
<script>
$(document).on('click', '.div-toggle', function() {
var target = $(this).data('target');
var show = $("button:selected", this).data('show');
$(target).children().addClass('hide');
$(show).removeClass('hide');
});
$(document).ready(function(){
$('.div-toggle').trigger('click');
});
</script>
Here is the Codepen.
Instead of doing it on div click .
Do it by button click:
Just simple code:
$(document).on('click', '.map-point-sm', function() {
var show = $(this).data('show');
$(show).removeClass("hide").siblings().addClass("hide");
});
You can check pan code here:
http://codepen.io/sagar_arora/pen/BRBopY
Change your code
var show = $("button:selected", this).data('show');
to
var show = $("button:focus", this).data('show');
TRY THIS
$(document).on('click', '.div-toggle', function() {
var target = $(this).data('target');
var show = $("button:focus", this).data('show');
$(target).children().addClass('hide');
$(show).removeClass('hide');
});
$(document).ready(function(){
$('.div-toggle').trigger('click');
});
.hide {
display: none;
}
.map-container {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="map-container">
<div class="inner-basic division-map div-toggle" data-target=".division-details" id="divisiondetail">
<button class="map-point" data-show=".darwin">
<div class="content">
<div class="centered-y">
<p>Darwin</p>
</div>
</div>
</button>
<button class="map-point-sm" data-show=".ptown">
<div class="content">
<div class="centered-y">
<p>Ptown</p>
</div>
</div>
</button>
<button class="map-point-sm" data-show=".philly">
<div class="content">
<div class="centered-y">
<p>Philly</p>
</div>
</div>
</button>
<button class="map-point-sm" data-show=".dela">
<div class="content">
<div class="centered-y">
<p>Dela</p>
</div>
</div>
</button>
</div><!-- end inner basic -->
</div>
<div class="map-container">
<div class="inner-basic division-details">
<div class="initialmsg">
<p>Choose button above</p>
</div>
<div class="darwin hide">
<p>Darwin Content here</p>
</div>
<div class="ptown hide">
<p>Ptown Content here</p>
</div>
<div class="philly hide">
<p>Philly Content here</p>
</div>
<div class="dela hide">
<p>Dela Content here</p>
</div>
</div>
</div>

Categories