Change parent div to active when child is active

up vote
1
down vote

favorite

I'm working on a CSS Collapsible menu that I created from the tutorial here.

I have a container div that has a button (accordion), that when active, displays content (panel div).

When the button is active, I want to put a border around the container div.

Is there a way I can set .container to active when the child (accordion) is active, so I can target it? Or is there an easier way in CSS?

Any advice anyone has is appreciated. I just can't seem to make it work :(

var acc = document.getElementsByClassName("accordion");

var i;



for (i = 0; i < acc.length; i++) {

  acc[i].addEventListener("click", function() {

    this.classList.toggle("active");

    var panel = this.nextElementSibling;

    if (panel.style.maxHeight) {

      panel.style.maxHeight = null;

    } else {

      panel.style.maxHeight = panel.scrollHeight + "px";

    }

  });

}

.container:hover {

  border: 1px solid #ededed;

}



.accordion {

  background-color: #eee;

  color: #444;

  cursor: pointer;

  padding: 18px;

  width: 100%;

  border: none;

  text-align: left;

  outline: none;

  font-size: 15px;

  transition: 0.4s;

}



.active,

.accordion:hover {

  background-color: #ccc;

}



.panel {

  padding: 0 18px;

  background-color: white;

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.2s ease-out;

}

<div class="container">

  <button class="accordion">Button text</button>

  <div class="panel">

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

  </div>

</div>

edited Nov 10 at 16:25

Andy

27.2k63158

asked Nov 10 at 16:15

mark914

175

Put all the HTML, CSS and Javascript in only one code snippet so that they all together.
– Dominique Fortin
Nov 10 at 16:23

Just do what you did for the panel and add a CSS class to the container.
– Dominique Fortin
Nov 10 at 16:27

add a comment |

up vote
1
down vote

favorite

I'm working on a CSS Collapsible menu that I created from the tutorial here.

I have a container div that has a button (accordion), that when active, displays content (panel div).

When the button is active, I want to put a border around the container div.

Is there a way I can set .container to active when the child (accordion) is active, so I can target it? Or is there an easier way in CSS?

Any advice anyone has is appreciated. I just can't seem to make it work :(

var acc = document.getElementsByClassName("accordion");

var i;



for (i = 0; i < acc.length; i++) {

  acc[i].addEventListener("click", function() {

    this.classList.toggle("active");

    var panel = this.nextElementSibling;

    if (panel.style.maxHeight) {

      panel.style.maxHeight = null;

    } else {

      panel.style.maxHeight = panel.scrollHeight + "px";

    }

  });

}

.container:hover {

  border: 1px solid #ededed;

}



.accordion {

  background-color: #eee;

  color: #444;

  cursor: pointer;

  padding: 18px;

  width: 100%;

  border: none;

  text-align: left;

  outline: none;

  font-size: 15px;

  transition: 0.4s;

}



.active,

.accordion:hover {

  background-color: #ccc;

}



.panel {

  padding: 0 18px;

  background-color: white;

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.2s ease-out;

}

<div class="container">

  <button class="accordion">Button text</button>

  <div class="panel">

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

  </div>

</div>

edited Nov 10 at 16:25

Andy

27.2k63158

asked Nov 10 at 16:15

mark914

175

Put all the HTML, CSS and Javascript in only one code snippet so that they all together.
– Dominique Fortin
Nov 10 at 16:23

Just do what you did for the panel and add a CSS class to the container.
– Dominique Fortin
Nov 10 at 16:27

add a comment |

up vote
1
down vote

favorite

I'm working on a CSS Collapsible menu that I created from the tutorial here.

I have a container div that has a button (accordion), that when active, displays content (panel div).

When the button is active, I want to put a border around the container div.

Is there a way I can set .container to active when the child (accordion) is active, so I can target it? Or is there an easier way in CSS?

Any advice anyone has is appreciated. I just can't seem to make it work :(

var acc = document.getElementsByClassName("accordion");

var i;



for (i = 0; i < acc.length; i++) {

  acc[i].addEventListener("click", function() {

    this.classList.toggle("active");

    var panel = this.nextElementSibling;

    if (panel.style.maxHeight) {

      panel.style.maxHeight = null;

    } else {

      panel.style.maxHeight = panel.scrollHeight + "px";

    }

  });

}

.container:hover {

  border: 1px solid #ededed;

}



.accordion {

  background-color: #eee;

  color: #444;

  cursor: pointer;

  padding: 18px;

  width: 100%;

  border: none;

  text-align: left;

  outline: none;

  font-size: 15px;

  transition: 0.4s;

}



.active,

.accordion:hover {

  background-color: #ccc;

}



.panel {

  padding: 0 18px;

  background-color: white;

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.2s ease-out;

}

<div class="container">

  <button class="accordion">Button text</button>

  <div class="panel">

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

  </div>

</div>

edited Nov 10 at 16:25

Andy

27.2k63158

asked Nov 10 at 16:15

mark914

175

I'm working on a CSS Collapsible menu that I created from the tutorial here.

I have a container div that has a button (accordion), that when active, displays content (panel div).

When the button is active, I want to put a border around the container div.

Is there a way I can set .container to active when the child (accordion) is active, so I can target it? Or is there an easier way in CSS?

Any advice anyone has is appreciated. I just can't seem to make it work :(

var acc = document.getElementsByClassName("accordion");

var i;



for (i = 0; i < acc.length; i++) {

  acc[i].addEventListener("click", function() {

    this.classList.toggle("active");

    var panel = this.nextElementSibling;

    if (panel.style.maxHeight) {

      panel.style.maxHeight = null;

    } else {

      panel.style.maxHeight = panel.scrollHeight + "px";

    }

  });

}

.container:hover {

  border: 1px solid #ededed;

}



.accordion {

  background-color: #eee;

  color: #444;

  cursor: pointer;

  padding: 18px;

  width: 100%;

  border: none;

  text-align: left;

  outline: none;

  font-size: 15px;

  transition: 0.4s;

}



.active,

.accordion:hover {

  background-color: #ccc;

}



.panel {

  padding: 0 18px;

  background-color: white;

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.2s ease-out;

}

<div class="container">

  <button class="accordion">Button text</button>

  <div class="panel">

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

  </div>

</div>

var acc = document.getElementsByClassName("accordion");

var i;



for (i = 0; i < acc.length; i++) {

  acc[i].addEventListener("click", function() {

    this.classList.toggle("active");

    var panel = this.nextElementSibling;

    if (panel.style.maxHeight) {

      panel.style.maxHeight = null;

    } else {

      panel.style.maxHeight = panel.scrollHeight + "px";

    }

  });

}

.container:hover {

  border: 1px solid #ededed;

}



.accordion {

  background-color: #eee;

  color: #444;

  cursor: pointer;

  padding: 18px;

  width: 100%;

  border: none;

  text-align: left;

  outline: none;

  font-size: 15px;

  transition: 0.4s;

}



.active,

.accordion:hover {

  background-color: #ccc;

}



.panel {

  padding: 0 18px;

  background-color: white;

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.2s ease-out;

}

<div class="container">

  <button class="accordion">Button text</button>

  <div class="panel">

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

  </div>

</div>

var acc = document.getElementsByClassName("accordion");

var i;



for (i = 0; i < acc.length; i++) {

  acc[i].addEventListener("click", function() {

    this.classList.toggle("active");

    var panel = this.nextElementSibling;

    if (panel.style.maxHeight) {

      panel.style.maxHeight = null;

    } else {

      panel.style.maxHeight = panel.scrollHeight + "px";

    }

  });

}

.container:hover {

  border: 1px solid #ededed;

}



.accordion {

  background-color: #eee;

  color: #444;

  cursor: pointer;

  padding: 18px;

  width: 100%;

  border: none;

  text-align: left;

  outline: none;

  font-size: 15px;

  transition: 0.4s;

}



.active,

.accordion:hover {

  background-color: #ccc;

}



.panel {

  padding: 0 18px;

  background-color: white;

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.2s ease-out;

}

<div class="container">

  <button class="accordion">Button text</button>

  <div class="panel">

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

  </div>

</div>

javascript css collapsable

edited Nov 10 at 16:25

Andy

27.2k63158

asked Nov 10 at 16:15

mark914

175

edited Nov 10 at 16:25

Andy

27.2k63158

asked Nov 10 at 16:15

mark914

175

edited Nov 10 at 16:25

Andy

27.2k63158

edited Nov 10 at 16:25

Andy

27.2k63158

edited Nov 10 at 16:25

Andy

27.2k63158

asked Nov 10 at 16:15

mark914

175

asked Nov 10 at 16:15

mark914

175

asked Nov 10 at 16:15

mark914

175

Put all the HTML, CSS and Javascript in only one code snippet so that they all together.
– Dominique Fortin
Nov 10 at 16:23

Just do what you did for the panel and add a CSS class to the container.
– Dominique Fortin
Nov 10 at 16:27

add a comment |

Put all the HTML, CSS and Javascript in only one code snippet so that they all together.
– Dominique Fortin
Nov 10 at 16:23

Just do what you did for the panel and add a CSS class to the container.
– Dominique Fortin
Nov 10 at 16:27

Put all the HTML, CSS and Javascript in only one code snippet so that they all together.
– Dominique Fortin
Nov 10 at 16:23

Just do what you did for the panel and add a CSS class to the container.
– Dominique Fortin
Nov 10 at 16:27

add a comment |

2 Answers
2

active

oldest

votes

up vote
0
down vote

accepted

Create a .container.active class, and toggle it from the JS with this.parentNode.classList.toggle('active');.

var acc = document.getElementsByClassName("accordion");

var i;



for (i = 0; i < acc.length; i++) {

  acc[i].addEventListener("click", function() {

    this.classList.toggle("active");

    this.parentNode.classList.toggle("active");

    var panel = this.nextElementSibling;

    if (panel.style.maxHeight) {

      panel.style.maxHeight = null;

    } else {

      panel.style.maxHeight = panel.scrollHeight + "px";

    }

  });

}

.container:hover {

  border: 1px solid #ededed;

}



.container.active {

  border: 1px solid black;

}



.accordion {

  background-color: #eee;

  color: #444;

  cursor: pointer;

  padding: 18px;

  width: 100%;

  border: none;

  text-align: left;

  outline: none;

  font-size: 15px;

  transition: 0.4s;

}



.active,

.accordion:hover {

  background-color: #ccc;

}



.panel {

  padding: 0 18px;

  background-color: white;

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.2s ease-out;

}

<div class="container">

  <button class="accordion">Button text</button>

  <div class="panel">

    <p>Test 3</p>

  </div>

</div>

<div class="container">

  <button class="accordion">Button text</button>

  <div class="panel">

    <p>Test 2</p>

  </div>

</div>

<div class="container">

  <button class="accordion">Button text</button>

  <div class="panel">

    <p>Test 3</p>

  </div>

</div>

edited Nov 10 at 22:31

answered Nov 10 at 16:37

Andy

27.2k63158

Thanks, this worked. But I have multiple containers and the active class is only added to the first one for some reason :(
– mark914
Nov 10 at 22:18

@mark914, I've added another two containers to my answer, and I think it does it properly.
– Andy
Nov 10 at 22:32

1

Sorry, my mistake. Got it working. Cheers mate!
– mark914
Nov 10 at 22:47

add a comment |

up vote
0
down vote

Add this line to the listener

document.getElementsByClassName("container")

        .classList.toggle("active");

And add these css rule

.container {

   border: 0px solid white;

}



.container.active {

   border: 1px solid black;

}

answered Nov 10 at 16:35

Dominique Fortin

1,511816

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53240863%2fchange-parent-div-to-active-when-child-is-active%23new-answer', 'question_page');
}
);

Post as a guest

Name

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

up vote
0
down vote

accepted

Create a .container.active class, and toggle it from the JS with this.parentNode.classList.toggle('active');.

var acc = document.getElementsByClassName("accordion");

var i;



for (i = 0; i < acc.length; i++) {

  acc[i].addEventListener("click", function() {

    this.classList.toggle("active");

    this.parentNode.classList.toggle("active");

    var panel = this.nextElementSibling;

    if (panel.style.maxHeight) {

      panel.style.maxHeight = null;

    } else {

      panel.style.maxHeight = panel.scrollHeight + "px";

    }

  });

}

.container:hover {

  border: 1px solid #ededed;

}



.container.active {

  border: 1px solid black;

}



.accordion {

  background-color: #eee;

  color: #444;

  cursor: pointer;

  padding: 18px;

  width: 100%;

  border: none;

  text-align: left;

  outline: none;

  font-size: 15px;

  transition: 0.4s;

}



.active,

.accordion:hover {

  background-color: #ccc;

}



.panel {

  padding: 0 18px;

  background-color: white;

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.2s ease-out;

}

<div class="container">

  <button class="accordion">Button text</button>

  <div class="panel">

    <p>Test 3</p>

  </div>

</div>

<div class="container">

  <button class="accordion">Button text</button>

  <div class="panel">

    <p>Test 2</p>

  </div>

</div>

<div class="container">

  <button class="accordion">Button text</button>

  <div class="panel">

    <p>Test 3</p>

  </div>

</div>

edited Nov 10 at 22:31

answered Nov 10 at 16:37

Andy

27.2k63158

Thanks, this worked. But I have multiple containers and the active class is only added to the first one for some reason :(
– mark914
Nov 10 at 22:18

@mark914, I've added another two containers to my answer, and I think it does it properly.
– Andy
Nov 10 at 22:32

1

Sorry, my mistake. Got it working. Cheers mate!
– mark914
Nov 10 at 22:47

add a comment |

up vote
0
down vote

accepted

Create a .container.active class, and toggle it from the JS with this.parentNode.classList.toggle('active');.

var acc = document.getElementsByClassName("accordion");

var i;



for (i = 0; i < acc.length; i++) {

  acc[i].addEventListener("click", function() {

    this.classList.toggle("active");

    this.parentNode.classList.toggle("active");

    var panel = this.nextElementSibling;

    if (panel.style.maxHeight) {

      panel.style.maxHeight = null;

    } else {

      panel.style.maxHeight = panel.scrollHeight + "px";

    }

  });

}

.container:hover {

  border: 1px solid #ededed;

}



.container.active {

  border: 1px solid black;

}



.accordion {

  background-color: #eee;

  color: #444;

  cursor: pointer;

  padding: 18px;

  width: 100%;

  border: none;

  text-align: left;

  outline: none;

  font-size: 15px;

  transition: 0.4s;

}



.active,

.accordion:hover {

  background-color: #ccc;

}



.panel {

  padding: 0 18px;

  background-color: white;

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.2s ease-out;

}

<div class="container">

  <button class="accordion">Button text</button>

  <div class="panel">

    <p>Test 3</p>

  </div>

</div>

<div class="container">

  <button class="accordion">Button text</button>

  <div class="panel">

    <p>Test 2</p>

  </div>

</div>

<div class="container">

  <button class="accordion">Button text</button>

  <div class="panel">

    <p>Test 3</p>

  </div>

</div>

edited Nov 10 at 22:31

answered Nov 10 at 16:37

Andy

27.2k63158

Thanks, this worked. But I have multiple containers and the active class is only added to the first one for some reason :(
– mark914
Nov 10 at 22:18

@mark914, I've added another two containers to my answer, and I think it does it properly.
– Andy
Nov 10 at 22:32

1

Sorry, my mistake. Got it working. Cheers mate!
– mark914
Nov 10 at 22:47

add a comment |

up vote
0
down vote

accepted

Create a .container.active class, and toggle it from the JS with this.parentNode.classList.toggle('active');.

var acc = document.getElementsByClassName("accordion");

var i;



for (i = 0; i < acc.length; i++) {

  acc[i].addEventListener("click", function() {

    this.classList.toggle("active");

    this.parentNode.classList.toggle("active");

    var panel = this.nextElementSibling;

    if (panel.style.maxHeight) {

      panel.style.maxHeight = null;

    } else {

      panel.style.maxHeight = panel.scrollHeight + "px";

    }

  });

}

.container:hover {

  border: 1px solid #ededed;

}



.container.active {

  border: 1px solid black;

}



.accordion {

  background-color: #eee;

  color: #444;

  cursor: pointer;

  padding: 18px;

  width: 100%;

  border: none;

  text-align: left;

  outline: none;

  font-size: 15px;

  transition: 0.4s;

}



.active,

.accordion:hover {

  background-color: #ccc;

}



.panel {

  padding: 0 18px;

  background-color: white;

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.2s ease-out;

}

<div class="container">

  <button class="accordion">Button text</button>

  <div class="panel">

    <p>Test 3</p>

  </div>

</div>

<div class="container">

  <button class="accordion">Button text</button>

  <div class="panel">

    <p>Test 2</p>

  </div>

</div>

<div class="container">

  <button class="accordion">Button text</button>

  <div class="panel">

    <p>Test 3</p>

  </div>

</div>

edited Nov 10 at 22:31

answered Nov 10 at 16:37

Andy

27.2k63158

Create a .container.active class, and toggle it from the JS with this.parentNode.classList.toggle('active');.

var acc = document.getElementsByClassName("accordion");

var i;



for (i = 0; i < acc.length; i++) {

  acc[i].addEventListener("click", function() {

    this.classList.toggle("active");

    this.parentNode.classList.toggle("active");

    var panel = this.nextElementSibling;

    if (panel.style.maxHeight) {

      panel.style.maxHeight = null;

    } else {

      panel.style.maxHeight = panel.scrollHeight + "px";

    }

  });

}

.container:hover {

  border: 1px solid #ededed;

}



.container.active {

  border: 1px solid black;

}



.accordion {

  background-color: #eee;

  color: #444;

  cursor: pointer;

  padding: 18px;

  width: 100%;

  border: none;

  text-align: left;

  outline: none;

  font-size: 15px;

  transition: 0.4s;

}



.active,

.accordion:hover {

  background-color: #ccc;

}



.panel {

  padding: 0 18px;

  background-color: white;

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.2s ease-out;

}

<div class="container">

  <button class="accordion">Button text</button>

  <div class="panel">

    <p>Test 3</p>

  </div>

</div>

<div class="container">

  <button class="accordion">Button text</button>

  <div class="panel">

    <p>Test 2</p>

  </div>

</div>

<div class="container">

  <button class="accordion">Button text</button>

  <div class="panel">

    <p>Test 3</p>

  </div>

</div>

var acc = document.getElementsByClassName("accordion");

var i;



for (i = 0; i < acc.length; i++) {

  acc[i].addEventListener("click", function() {

    this.classList.toggle("active");

    this.parentNode.classList.toggle("active");

    var panel = this.nextElementSibling;

    if (panel.style.maxHeight) {

      panel.style.maxHeight = null;

    } else {

      panel.style.maxHeight = panel.scrollHeight + "px";

    }

  });

}

.container:hover {

  border: 1px solid #ededed;

}



.container.active {

  border: 1px solid black;

}



.accordion {

  background-color: #eee;

  color: #444;

  cursor: pointer;

  padding: 18px;

  width: 100%;

  border: none;

  text-align: left;

  outline: none;

  font-size: 15px;

  transition: 0.4s;

}



.active,

.accordion:hover {

  background-color: #ccc;

}



.panel {

  padding: 0 18px;

  background-color: white;

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.2s ease-out;

}

<div class="container">

  <button class="accordion">Button text</button>

  <div class="panel">

    <p>Test 3</p>

  </div>

</div>

<div class="container">

  <button class="accordion">Button text</button>

  <div class="panel">

    <p>Test 2</p>

  </div>

</div>

<div class="container">

  <button class="accordion">Button text</button>

  <div class="panel">

    <p>Test 3</p>

  </div>

</div>

var acc = document.getElementsByClassName("accordion");

var i;



for (i = 0; i < acc.length; i++) {

  acc[i].addEventListener("click", function() {

    this.classList.toggle("active");

    this.parentNode.classList.toggle("active");

    var panel = this.nextElementSibling;

    if (panel.style.maxHeight) {

      panel.style.maxHeight = null;

    } else {

      panel.style.maxHeight = panel.scrollHeight + "px";

    }

  });

}

.container:hover {

  border: 1px solid #ededed;

}



.container.active {

  border: 1px solid black;

}



.accordion {

  background-color: #eee;

  color: #444;

  cursor: pointer;

  padding: 18px;

  width: 100%;

  border: none;

  text-align: left;

  outline: none;

  font-size: 15px;

  transition: 0.4s;

}



.active,

.accordion:hover {

  background-color: #ccc;

}



.panel {

  padding: 0 18px;

  background-color: white;

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.2s ease-out;

}

<div class="container">

  <button class="accordion">Button text</button>

  <div class="panel">

    <p>Test 3</p>

  </div>

</div>

<div class="container">

  <button class="accordion">Button text</button>

  <div class="panel">

    <p>Test 2</p>

  </div>

</div>

<div class="container">

  <button class="accordion">Button text</button>

  <div class="panel">

    <p>Test 3</p>

  </div>

</div>

edited Nov 10 at 22:31

answered Nov 10 at 16:37

Andy

27.2k63158

edited Nov 10 at 22:31

answered Nov 10 at 16:37

Andy

27.2k63158

answered Nov 10 at 16:37

Andy

27.2k63158

answered Nov 10 at 16:37

Andy

27.2k63158

Thanks, this worked. But I have multiple containers and the active class is only added to the first one for some reason :(
– mark914
Nov 10 at 22:18

@mark914, I've added another two containers to my answer, and I think it does it properly.
– Andy
Nov 10 at 22:32

1

Sorry, my mistake. Got it working. Cheers mate!
– mark914
Nov 10 at 22:47

add a comment |

Thanks, this worked. But I have multiple containers and the active class is only added to the first one for some reason :(
– mark914
Nov 10 at 22:18

@mark914, I've added another two containers to my answer, and I think it does it properly.
– Andy
Nov 10 at 22:32

1

Sorry, my mistake. Got it working. Cheers mate!
– mark914
Nov 10 at 22:47

Thanks, this worked. But I have multiple containers and the active class is only added to the first one for some reason :(
– mark914
Nov 10 at 22:18

@mark914, I've added another two containers to my answer, and I think it does it properly.
– Andy
Nov 10 at 22:32

Sorry, my mistake. Got it working. Cheers mate!
– mark914
Nov 10 at 22:47

add a comment |

up vote
0
down vote

Add this line to the listener

document.getElementsByClassName("container")

        .classList.toggle("active");

And add these css rule

.container {

   border: 0px solid white;

}



.container.active {

   border: 1px solid black;

}

answered Nov 10 at 16:35

Dominique Fortin

1,511816

add a comment |

up vote
0
down vote

Add this line to the listener

document.getElementsByClassName("container")

        .classList.toggle("active");

And add these css rule

.container {

   border: 0px solid white;

}



.container.active {

   border: 1px solid black;

}

answered Nov 10 at 16:35

Dominique Fortin

1,511816

add a comment |

up vote
0
down vote

Add this line to the listener

document.getElementsByClassName("container")

        .classList.toggle("active");

And add these css rule

.container {

   border: 0px solid white;

}



.container.active {

   border: 1px solid black;

}

answered Nov 10 at 16:35

Dominique Fortin

1,511816

Add this line to the listener

document.getElementsByClassName("container")

        .classList.toggle("active");

And add these css rule

.container {

   border: 0px solid white;

}



.container.active {

   border: 1px solid black;

}

answered Nov 10 at 16:35

Dominique Fortin

1,511816

answered Nov 10 at 16:35

Dominique Fortin

1,511816

answered Nov 10 at 16:35

Dominique Fortin

1,511816

answered Nov 10 at 16:35

Dominique Fortin

1,511816

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Name

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky