The content bodies of an accordion open by clicking on panels. This is usually what's best. What I am trying to do now is change this behavior so that the content bodies only get revealed by clicking on a link included in one of the panels (or anywhere else, really). Hope that makes sense.
First of all: Is this possible?
This is the code right now:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
background-color: #fff;
color: #444;
cursor: pointer;
width: 103%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
margin: -5px;
}
.bg {
width: 100%;
}
.active,
.accordion:hover {
background-color: #fff;
}
.panel {
padding: 50px 0px;
display: none;
width: 100%;
background-color: white;
overflow: hidden;
border-style: groove;
}
.accordion.active+div {
display: block
}
.column {
float: left;
width: 20%;
padding: 10px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<button class="accordion"><div class="parent">Only the following link should open the content panel: link_1</button>
<div class="panel">
<p>Content 1</p>
</div>
<button class="accordion">Only the following link should open the content panel: link_2</button>
<div class="panel">
<p>Content 2</p>
</div>
<button class="accordion">Only the following link should open the content panel: link_3</button>
<div class="panel">
<p>Content 3</p>
</div>
<button class="accordion">Only the following link should open the content panel: link_4</button>
<div class="panel">
<p>Content 4</p>
</div>
<script>
function scrollElmVert(el,num) { // to scroll up use a negative number
var re=/html$/i;
while(!re.test(el.tagName) && (1 > el.scrollTop)) el=el.parentNode;
if(0 < el.scrollTop) el.scrollTop += num;
}
var acc = document.getElementsByClassName("accordion");
var i;
var open = null;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
if (open == this) {
open.classList.toggle("active");
open = null;
} else {
if (open != null) {
open.classList.toggle("active");
}
this.classList.toggle("active");
open = this;
//Scroll to clicked element
open.scrollIntoView();
scrollElmVert(open,-68);
}
});
}
</script>
</body>
</html>
Few changes to the css, but overall its an html issue. You will need to have two different elements or at least different classes to distiguish between the one that opens your accordion and the one that doesn't
Hope this is what you were looking for. Happy to explain or help in a better solution if needed.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
background-color: #fff;
color: #444;
cursor: pointer;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
margin: -5px;
display: inline;
}
.not-accordion {
color: #444;
font-size: 15px;
display: inline-block;
}
.bg {
width: 100%;
}
.active,
.accordion:hover {
background-color: #fff;
}
.panel {
padding: 50px 0px;
display: none;
width: 100%;
background-color: white;
overflow: hidden;
border-style: groove;
}
.accordion.active+div {
display: block
}
.column {
float: left;
width: 20%;
padding: 10px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="parent">
<p class='not-accordion'>Only the following link should open the content panel:</p> <button class="accordion">link_1</button>
<div class="panel">
<p>Content 1</p>
</div>
<p class='not-accordion'>Only the following link should open the content panel:</p> <button class="accordion">link_2</button>
<div class="panel">
<p>Content 2</p>
</div>
<p class='not-accordion'>Only the following link should open the content panel:</p> <button class="accordion">link_3</button>
<div class="panel">
<p>Content 3</p>
</div>
<p class='not-accordion'>Only the following link should open the content panel:</p> <button class="accordion">link_4</button>
<div class="panel">
<p>Content 4</p>
</div>
<script>
function scrollElmVert(el, num) { // to scroll up use a negative number
var re = /html$/i;
while (!re.test(el.tagName) && (1 > el.scrollTop)) el = el.parentNode;
if (0 < el.scrollTop) el.scrollTop += num;
}
var acc = document.getElementsByClassName("accordion");
var i;
var open = null;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
if (open == this) {
open.classList.toggle("active");
open = null;
} else {
if (open != null) {
open.classList.toggle("active");
}
this.classList.toggle("active");
open = this;
//Scroll to clicked element
open.scrollIntoView();
scrollElmVert(open, -68);
}
});
}
</script>
</body>
</html>
Related
Using Javascript to open and close a navbar but it's not working in my new project
When i use devtools i can see the function active but my nav bar does not open or close. So funny because i've used it for an old project which is working fine. I have no idea why this time it's frustrating. I need your help please if any
This is the js code
let Menupopupup = document.getElementById("dropdownheadernav");
function opendropdownheadernav() {
Menupopupup.classList.add("Openmenudrops");
document.body.style.overflow = "hidden";
}
function closedropdownheadernav() {
Menupopupup.classList.remove("Openmenudrops");
document.body.style.overflow = "auto";
}
This is my HTML
<nav class="firstnavigationbar">
<button id="Showscroll" type="submit" class="barsbutton" onclick="opendropdownheadernav()">
<div class="barbtnimagecontainer" >
<img class="barbtn"
src="./B-NFT-IMGS/Screenshot 2022-11-29 at 07.00.30.png"
height="23"
width="22"
alt=""
/></div></button>
<ul class="firstunorderedlist" id="dropdownheadernav">
<button id="Closescroll" type="button" class="closemenubutton" onclick="closedropdownheadernav()"><span class="closemenuspan">✕</span></button>
This is my Css
.firstunorderedlist {
margin-top: -40px;
display: none;
color: #1e2329;
list-style: none;
line-height: 3.5;
background-color: #fff;
width: 320px;
overflow: hidden;
}
The element UL must be closed with /ul. As for javascript, you need to find the element by id and then use style.display and make it equal to the desired value. I attached the neatified code below. It does what you need and is made shorter.
<!DOCTYPE html>
<html>
<head>
<style>
.firstunorderedlist {
margin-top: -40px;
display: none;
color: #1e2329;
list-style: none;
line-height: 3.5;
background-color: #fff;
width: 320px;
overflow: hidden;
}
</style>
</head>
<body>
<nav class="firstnavigationbar">
<button id="Showscroll" type="submit" class="barsbutton" onclick="openNav()">
<div class="barbtnimagecontainer" >
<img class="barbtn"
src="./B-NFT-IMGS/Screenshot 2022-11-29 at 07.00.30.png"
height="23"
width="22"
alt="">
</div>
</button>
<ul class="firstunorderedlist" id="dropdownheadernav">
<li>Code</li>
<li>Goes</li>
<li>Here</li>
</ul>
<button id="Closescroll" type="button" class="closemenubutton" onclick="openNav()">
<span class="closemenuspan">✕</span>
</button>
<script>
let navOpened = false;
function openNav() {
if (navOpened) {
navOpened = false;
document.getElementById("dropdownheadernav").style.display = 'none';
} else {
navOpened = true;
document.getElementById("dropdownheadernav").style.display = 'initial';
}
}
</script>
</body>
</html>
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
.mobile-container {
max-width: 480px;
margin: auto;
background-color: blue;
height: 500px;
color: white;
border-radius: 10px;
}
.topnav {
overflow: hidden;
background-color: red;
position: relative;
}
.topnav #myLinks {
display: none;
}
.topnav a {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}
.topnav a.icon {
background: black;
display: block;
position: absolute;
right: 0;
top: 0;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #04AA6D;
color: white;
}
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<body>
<div class="mobile-container">
<div class="topnav">
Navbar
<div id="myLinks">
News
Contact
About
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div style="padding-left:16px">
<h3>Vertical Mobile Navbar</h3>
<p>This example demonstrates how a navigation menu on a mobile/smart phone could look like.</p>
<p>Click on the hamburger menu (three bars) in the top right corner, to toggle the menu.</p>
</div>
</div>
</body>
<html>
I am a beginner, so appreciate the patience on this one. I am trying to embed a really simple tab structure on my website. I'm not sure why it is not working. Here is the code below.
My guess it is something to do with the JS, but again, I am only really new to this.
Any help would be greatly appreciated! Thanks!
(I have used code found on CodePen for this)
<html lang="en" >
<head>
<script>$(function () {
var activeIndex = $('.active-tab').index(),
$contentlis = $('.tabs-content li'),
$tabslis = $('.tabs li');
// Show content of active tab on loads
$contentlis.eq(activeIndex).show();
$('.tabs').on('click', 'li', function (e) {
var $current = $(e.currentTarget),
index = $current.index();
$tabslis.removeClass('active-tab');
$current.addClass('active-tab');
$contentlis.hide().eq(index).show();
});
});</script>
<meta charset="UTF-8">
<title>CodePen - Simple tabs</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
<style>.tabs {
margin: 20px;
padding: 0;
list-style: none;
position: relative;
border-bottom: 1px solid #ccc;
}
.tabs .active-tab {
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: none;
position: relative;
color: black;
}
.tabs .active-tab:after {
width: 100%;
height: 2px;
position: absolute;
content: "";
bottom: -0.1em;
left: 0;
background: white;
}
.tabs li {
display: inline-block;
cursor: pointer;
color: #3a5ea7;
padding: 5px 10px;
}
.tabs li:first-child {
margin-left: 10px;
}
.tabs-content {
margin: 20px;
padding: 0;
list-style: none;
}
.tabs-content li {
display: none;
}</style>
</head>
<body>
<!-- partial:index.partial.html -->
<ul class="tabs">
<li class="active-tab">First tab</li>
<li>Second tab</li>
<li>Third tab</li>
</ul>
<ul class="tabs-content">
<li>Content of first tab</li>
<li>Content of second tab</li>
<li>Content of third tab</li>
</ul>
<!-- partial -->
</body>
</html>
There are lots of stuff happening there.
At first sight, you are not using JavaScript, you are using a library called JQuery, so you need to "import" it, otherwise that code won't work.
It must be placed before your JQuery code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
I would recommend placing the code you've written at the bottom of the page, before the closing body tag
---> HERE
</body>
Improvements:
Separating your code into "modules" or smaller chunks.
Everything inside style tag, cut it and paste it in a new file, for example, style.css.
Everything inside script tag, cut it and paste it in a new file, for example, app.js.
After that import them, the JavaScript file, before the closing body tag, like mentioned before, and the css next to the others styles imports.
So, you'll end up with something like this:
Top of the page, inside head tag
...
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
Bottom of the page, before closing body tag
...
<script src="./app.js"></script>
</body>
You can check which external sources are being used (like JQuery or Bootstrap) by clicking on the settings inside a Codepen environment. This particular script use JQuery, this can be imported in your <head> with a <script> tag using the online hosted version (CDN) or manually downloading it.
You can use this for now:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
you can use this code for creating your simple tabs
(function() {
'use strict';
var tabMenus,
tabContents;
tabMenus = document.querySelectorAll('.tab_menu_item_link');
tabContents = document.querySelectorAll('.tab_content');
for (var i = 0; i < tabMenus.length; i++) {
tabMenus[i].addEventListener('click', function(e) {
e.preventDefault();
for (var i = 0; i < tabMenus.length; i++) {
tabMenus[i].className = 'tab_menu_item_link';
}
this.className = 'tab_menu_item_link is-active';
for (var i = 0; i < tabContents.length; i++) {
tabContents[i].className = 'tab_content';
}
document.getElementById(this.dataset.id).className = 'tab_content is-active';
});
}
}());
body {
font-size: 14px;
line-height: 1.5;
color: #333;
}
ul , li {
padding : 0;
margin: 0;
list-style: none
}
a {
text-decoration: none;
color: #333;
}
img {
vertical-align: bottom;
}
.clearfix {
display: table;
clear: both;
}
.container {
width: 400px;
margin: 0 auto;
padding: 50px 0;
background: #fff;
}
.tab_menu {
width: 100%;
}
.tab_menu_item {
float: left;
margin-right: 2px;
text-align: center;
}
.tab_menu_item:last-child {
margin-right: 0;
}
.tab_menu_item_link {
display: block;
width: 100px;
padding: 10px;
background: #fff;
border-radius: 5px 5px 0 0;
border: 1px solid #888;
border-bottom: none;
box-sizing: border-box;
color: #888;
transition: 0.3s;
}
.tab_menu_item_link:hover, .tab_menu_item_link.is-active {
background: #888;
color: #fff;
}
.tab_container {
border: 1px solid #888;
}
.tab_content {
padding: 20px;
display: none;
}
.tab_content.is-active {
display: block;
-webkit-animation: fade 0.5s ease;
animation: fade 0.5s ease;
}
#-webkit-keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div class="container">
<div class="tab">
<ul class="tab_menu clearfix">
<li class="tab_menu_item">About</li>
<li class="tab_menu_item">Works</li>
<li class="tab_menu_item">Contact</li>
</ul>
<div class="tab_container">
<div class="tab_content is-active" id="about">
<p>some content about ...</p>
</div>
<div class="tab_content" id="works">
<p>some content works ...</p>
</div>
<div class="tab_content" id="contact">
<p>some content contact ...</p>
</div>
</div>
</div>
</div>
you can see this sample in my codepen:
codepen.io
My code shows and hides divs depending on which button the user clicks, implemented by simple myElement.style.display = 'none'; statements.
Can transitions be used when these divs are shown/hidden? I.e. when button-1 is clicked, text relating to button-1 fades into view; when button-2 is clicked, text relating to button-2 fades into view as the previous button-1 text fades out?
As is, the divs snap in and out of view. I am looking for a smoother transition.
I have attempted it with the code which is shown commented out. It just doesn't work. Any tips are much appreciated, thank you.
JS
var visibleDivId = null;
function divVisibility(divId) {
if(visibleDivId === divId) {
visibleDivId = null;
} else {
visibleDivId = divId;
}
hideNonVisibleDivs();
}
function hideNonVisibleDivs() {
var i, divId, div;
for(i = 0; i < divs.length; i++) {
divId = divs[i];
respoding_div = document.getElementById(divId);
if(visibleDivId == divId) {
respoding_div.style.display = 'block';
// respoding_div.style.transition = 'display 0.3s ease-in block'
}
else {
respoding_div.style.display = 'none';
// respoding_div.style.transition = 'display 0.3s ease-in none'
}
}
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container" style="text-align:center; margin:0 auto;">
<div class="card-container" style="margin:0 auto; width:50%; display: flex; align-items: center; justify-content: center; padding-bottom:10px;">
<div class='accordion' onclick="divVisibility('Core1');">
<img src='https://img.icons8.com/dotty/2x/external-link-squared.png' width="50px">Button-1
</div>
<div class='accordion' onclick="divVisibility('Core2');">
<img src='https://img.icons8.com/dotty/2x/globe-earth.png' width="50px">Button-2
</div>
<div class='accordion' onclick="divVisibility('Core3');">
<img src='https://img.icons8.com/dotty/2x/torrent.png' width="50px">Button-3
</div>
</div>
<div class="all_divs">
<div id="Core1" class="subdiv" style="display:none;">TEXT #1</div>
<div id="Core2" class="subdiv" style="display:none;">TEXT #2</div>
<div id="Core3" class="subdiv" style="display:none;">TEXT #3</div>
</div>
</div>
</div>
</body>
</html>
CSS
body{
font-family: "IBM Plex Sans", sans-serif;
}
.accordion {
cursor: pointer;
border: none;
text-align: center;
outline: none;
font-size: 15px;
padding-left:100px;
padding-right:100px;
padding-top: 20px;
width: 80px;
}
.accordion:hover {
opacity: 0.7;
}
.accordion img {
width: 50px;
margin: 0 auto;
}
.all_divs > div {
color: #232f3e;
width: 95%;
text-align: center;
background-color:#fafafa;
position: absolute;
padding:2%;
border-top: 2px solid #e6e7e8;
}
h1{
font-weight: lighter;
color: #232f3e;
}
td{
padding: 2%;
}
it will not work not because of the syntax or something wrong in JS but because of the display property can't be transitioned from state to another. u can use opacity for that.
i have a Sidebar on the left of the Screen. I can toggle it by pressing a button. On the right I have the content.
I want to place the button on a horizontal bar on the top. The sidebar seems to cover this bar so I can not see the button.
This is my current code:
The Html File:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>
</title>
</head>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="MainController.js"></script>
<link rel="stylesheet" type="text/css" href="MainStyle.css">
<body onload="InitDocument()">
<div id="topBar">
<button id="btnNavToggle" type="button" onclick="ToggleNavbar()">Menu</button>
</div>
<div id="container">
<div id="sideNav">
<button type="button" onclick="NewEntry()">+</button>
<p>test</p>
</div>
<div id="mainArea">
<p>Title:</p>
<input id="titleInputField" type="text">
<p>Text:</p>
<textarea id="textArea"> </textarea>
<p></p>
<button type="button" onclick="SaveEntry()">Save</button>
</div>
</div>
</body>
</html>
The Css File:
body{
background-color: #EEEEEE;
color: #000000;
}
* {
margin: 0;
padding: 0;
}
#sideNav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
overflow-x: hidden;
background-color: #333333;
color: #EEEEEE;
}
The Js File:
var navIsOpen = true;
function InitDocument(){ // Initialization
ToggleNavbar();
}
function ToggleNavbar(){ // show - hide the navbar
var sideNavWidth = "0px";
var mainAreaWidth = "0px";
if (navIsOpen)
{
sideNavWidth = "200px";
mainAreaWidth = "200px";
}
$("#sideNav").width(sideNavWidth);
$("#mainArea").css('margin-left',mainAreaWidth);
navIsOpen = !navIsOpen;
}
function SaveEntry(){ // save the entry
var txtTitle = $("#titleInputField").val();
var txtField = $("#textArea").val();
alert(txtTitle + "#" + txtField);
}
function NewEntry() { // create a new entry
alert("neuer Eintrag");
}
This is what I want to archieve
It seems I just have to fix the CSS to get it done.
I added margin-top:0; to your topBar and removed top: 0; from your sideNav.
Try this:
var navIsOpen = true;
function InitDocument(){ // Initialization
ToggleNavbar();
}
function ToggleNavbar(){ // show - hide the navbar
var sideNavWidth = "0px";
var mainAreaWidth = "0px";
if (navIsOpen)
{
sideNavWidth = "200px";
mainAreaWidth = "200px";
}
$("#sideNav").width(sideNavWidth);
$("#mainArea").css('margin-left',mainAreaWidth);
navIsOpen = !navIsOpen;
}
function SaveEntry(){ // save the entry
var txtTitle = $("#titleInputField").val();
var txtField = $("#textArea").val();
alert(txtTitle + "#" + txtField);
}
function NewEntry() { // create a new entry
alert("neuer Eintrag");
}
body{
background-color: #EEEEEE;
color: #000000;
}
*{
margin: 0;
padding: 0;
}
#topBar {
margin-top:0;
background-color: navy;
}
#sideNav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
left: 0;
overflow-x: hidden;
background-color: #333333;
color: #EEEEEE;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>
</title>
</head>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="MainController.js"></script>
<link rel="stylesheet" type="text/css" href="MainStyle.css">
<body onload="InitDocument()">
<div id="topBar">
<button id="btnNavToggle" type="button" onclick="ToggleNavbar()">Menu</button>
</div>
<div id="container">
<div id="sideNav">
<button type="button" onclick="NewEntry()">+</button>
<p>test</p>
</div>
<div id="mainArea">
<p>Title:</p>
<input id="titleInputField" type="text">
<p>Text:</p>
<textarea id="textArea"> </textarea>
<p></p>
<button type="button" onclick="SaveEntry()">Save</button>
</div>
</div>
</body>
</html>
Try this:
var navIsOpen = true;
function InitDocument(){ // Initialization
ToggleNavbar();
}
function ToggleNavbar(){ // show - hide the navbar
var sideNavWidth = "0px";
var mainAreaWidth = "0px";
if (navIsOpen)
{
sideNavWidth = "200px";
mainAreaWidth = "200px";
}
$("#sideNav").width(sideNavWidth);
$("#mainArea").css('margin-left',mainAreaWidth);
navIsOpen = !navIsOpen;
}
function SaveEntry(){ // save the entry
var txtTitle = $("#titleInputField").val();
var txtField = $("#textArea").val();
alert(txtTitle + "#" + txtField);
}
function NewEntry() { // create a new entry
alert("neuer Eintrag");
}
body{
background-color: #EEEEEE;
color: #000000;
}
* {
margin: 0;
padding: 0;
}
#main {
display: flex;
flex-direction: column;
}
#sideNav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 50px;
left: 0;
overflow-x: hidden;
background-color: #333333;
color: #EEEEEE;
}
#topBar {
position: fixed;
display: inline-block;
width: 100%;
height: 50px;
background-color: red;
}
#container {
display: flex;
padding-top: 50px;
flex: 1;
flex-direction: row;
}
<html>
<head>
<meta charset="utf-8" />
<title>
</title>
</head>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="MainController.js"></script>
<link rel="stylesheet" type="text/css" href="MainStyle.css">
<body onload="InitDocument()">
<div id="main">
<div id="topBar">
<button id="btnNavToggle" type="button" onclick="ToggleNavbar()">Menu</button>
</div>
<div id="container">
<div id="sideNav">
<button type="button" onclick="NewEntry()">+</button>
<p>test</p>
</div>
<div id="mainArea">
<p>Title:</p>
<input id="titleInputField" type="text">
<p>Text:</p>
<textarea id="textArea"> </textarea>
<p></p>
<button type="button" onclick="SaveEntry()">Save</button>
</div>
</div>
</div>
</body>
</html>
Take a look flex-box concepts
Checkout this example of using the new HTML5 semantic elements.
http://www.w3schools.com/html/html5_semantic_elements.asp
I have taken most of the example elements from the link above and created a simple HTML5 page.
You can add/remove/modify any of the section below by removing the HTML or removing/adding additional CSS properties.
var toggleButton = document.getElementById('toggle-button');
var pageWrapper = document.getElementsByClassName('wrapper')[0];
toggleButton.addEventListener('click', function() {
toggleClass(pageWrapper, 'toggle-hidden')
});
function toggleClass(el, className) {
if (el.classList) {
el.classList.toggle(className);
} else {
var classes = el.className.split(' ');
var existingIndex = classes.indexOf(className);
if (existingIndex >= 0) classes.splice(existingIndex, 1);
else classes.push(className);
el.className = classes.join(' ');
}
}
header, footer {
width: 100%;
text-align: center;
background: #DDD;
padding: 0.25em !important;
}
.title {
font-weight: bold;
font-size: 2.25em;
margin-bottom: 0.5em;
}
.subtitle {
font-size: 1.5em;
font-style: italic;
}
.wrapper {
background: #EEE;
}
nav {
text-align: center;
background: #CCC;
padding: 0.25em !important;
}
aside {
float: left;
top: 0;
width: 12em;
height: 100%;
padding: 0.25em !important;
}
aside a {
display: block;
text-decoration: none;
margin-bottom: 0.5em;
}
aside a:before {
content: '➢ ';
}
article, section {
margin-left: 12em !important;
background: #FFF;
padding: 0.25em !important;
}
/* Default HTML4 typography styles */
h1 { font-size: 2.00em !important; margin: 0.67em 0 !important; }
h2 { font-size: 1.50em !important; margin: 0.75em 0 !important; }
h3 { font-size: 1.17em !important; margin: 0.83em 0 !important; }
h5 { font-size: 0.83em !important; margin: 1.50em 0 !important; }
h6 { font-size: 0.75em !important; margin: 1.67em 0 !important; }
h1, h2, h3, h4, h5, h6 { font-weight: bolder !important; }
p { font-size: 1.00em !important; margin: 1em 0 !important; }
#toggle-button {
display: block;
position: absolute;
width: 5em;
height: 5em;
line-height: 1.5em;
text-align: center;
}
.wrapper.toggle-hidden aside {
display: none;
width: 0;
}
.wrapper.toggle-hidden article, .wrapper.toggle-hidden section {
margin-left: 0 !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet"/>
<header>
<button id="toggle-button">Toggle<br />Sidebar</button>
<div class="title">What Does WWF Do?</div>
<div class="subtitle">WWF's mission:</div>
</header>
<div class="wrapper">
<nav>
HTML |
CSS |
JavaScript |
jQuery
</nav>
<aside>
<h1>Links</h1>
HTML
CSS
JavaScript
jQuery
</aside>
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
<article>
<h1>What Does WWF Do?</h1>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article>
</div>
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: someone#example.com.</p>
</footer>
I need some little help with some template I'm working on for my project.
I found this code for an accordion container on the internet:
/* Toggle between adding and removing the "active" and "show" classes when the user clicks on one of the "Section" buttons. The "active" class is used to add a background color to the current button when its belonging panel is open. The "show" class is used to open the specific accordion panel */
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function () {
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
/* Style the buttons that are used to open and close the accordion panel */
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: 1px solid lightgray;
outline: none;
transition: 0.4s;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
/* Style the accordion panel. Note: hidden by default */
div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: 0.6s ease-in-out;
opacity: 0;
}
/* The "show" class is added to the accordion panel when the user clicks on one of the buttons. This will show the panel content */
div.panel.show {
opacity: 1;
max-height: 500px;
}
button.accordion:after {
content: "+"; /* Unicode character for "plus" sign (+) */
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}
button.accordion.active:after {
content: "-"; /* Unicode character for "minus" sign (-) */
}
<button class="accordion">Section 1</button>
<div class="panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 2</button>
<div class="panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 3</button>
<div class="panel">
<p>Lorem ipsum...</p>
</div>
It works fine, looks nice, exactly what I wanted. But when I try to do something like this:
<div ng-repeat="category in categories">
<button class="accordion">{{category.name}}</button>
<div class="panel">
<p>{{category.description}}</p>
</div>
</div>
the tabs don't open anymore. I can't find the problem. Can anyone give me a solution to this?
Thank you.
Here is a different approach to do this:
Add ng-click to the button to toggle the class active of him.
Change the .show selector to button.active + div.panel so you can change only the button class.
angular.module('app', []).controller('ctrl', function($scope) {
$scope.categories = [];
for (var i = 1; i <= 3; i++) {
$scope.categories.push({
name: 'cat' + i,
description: 'description' + i
});
}
});
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
button.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;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: 0.6s ease-in-out;
opacity: 0;
}
button.active + div.panel {
opacity: 1;
max-height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<h2>Animated Accordion</h2>
<div ng-app="app" ng-controller="ctrl">
<div ng-repeat="category in categories">
<button class="accordion" data-ng-click="category.active = !category.active" data-ng-class="{'active': category.active}">{{category.name}}</button>
<div class="panel">
<p>{{category.description}}</p>
</div>
</div>
</div>
var app = angular.module('app',[]);
app.controller('mycontroller',function($scope){
$scope.categories = [{name:'Lorem ipsum...'},{name:'Lorem ipsum...'},{name:'Lorem ipsum...'}]
});
<html ng-app='app'>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
</head>
<body ng-controller='mycontroller'>
<div ng-repeat="category in categories">
<button ng-class="accordion">{{category.name}}</button>
<div ng-class="panel">
<p>{{category.description}}</p>
</div>
</div></body>
</html>