I'm currently working on a horizontal accordion dropdown navbar and I'm attempting to make it so that only one section can be expanded at a time. For instance, if subsection A is already expanded and you click on section B, then subsection A should collapse while subsection B expands. At the moment, both can be expanded simultaneously.
Any assistance would be greatly appreciated!
(I also acknowledge that this may not strictly be a dropdown, but I'm unsure if using sideslide would be any less confusing)
$(function () {
$(".item").on("click", function () {
$(this)
.next().toggleClass("active");
});
$("#body").css("min-height", "100%");
});
$(document).ready(function() {
var $overlay = $('<div class="overlay"></div>');
var $href = $('this').attr('href');
var $popup = $('.pop-window');
$('<div class="close">x</div>').appendTo($popup);
$popup.hide();
$('a').click(function(e) {
e.preventDefault();
$overlay.fadeIn(800).appendTo('body');
$popup.delay(800).slideDown();
});
$overlay.click(function() {
$overlay.delay(800).fadeOut();
$popup.slideUp();
});
$('.close').click(function() {
$popup.slideUp();
$overlay.delay(800).fadeOut();
});
});*{
box-sizing: border-box;
}
body{
background: #eaeaea;
color: #333333;
margin: 0 0 100px;
bottom: 1rem;
}
body.background{
background-image: url("lab3.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
background-size: 100% auto;
color: ...
html{
overflow-x: hidden;
width:100%;
min-height:100%;
position: relative;
margin:0;
}
.header{
height:100px;
width:110%;
background-color:#3a1f51;
color:white;
display: block;
margin:-10px;
top:-10px;
padding:-10px;
margin-bottom:-20px;
position:relative;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
z-index:2;
}
h1{
margin:0;
margin-bottom:10px;
margin-left:40px;
padding:0;
position: absolute;
bottom:0;
color:#d1d1d1;
font-family: Roboto, sans-serif;
letter-spacing: 5px;
font-size:18;
...
...
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class=header>
<h1>Title</h1>
</div>
<div class="slidebox">
<section>
<div class="item"> header ›</div>
<div class="info"><a href="https://codepen.io/SideSlaw/pen/vWZVVN" class="bolded2" style="text-decoration: none; color:#6a27b2;">subheader</a> | <a href="https://codepen.io/SideSlaw/pen/vWZVVN" class="bolden" style="text-decoration: none; color:#6a27b2;">subheader</a></div>
<div class="item"> header ›</div>
<div class="info"><a href="https://codepen.io/SideSlaw/pen/vWZVVN" class="bolden" style="text-decoration: none; color:#6a27b2;">subheader</a> | <a href="https://codepen.io/SideSlaw/pen/vWZVVN" class="bolden" style="text-decoration: none; color:#6a27b2;">subheader</a></div>
<a href="https://codepen.io/SideSlaw/pen/vWZVVN" style="text-decoration: none; color:#6a27b2;"><div class="nitem"> header</div></a>
...