Here is reusable jquery script for dropdown elements. You can keep every dropdown open at the same time or hide all other dropdowns when you open one.
You can add a new dropdown element declaratively via html. You need to add the attribute data-toggleclick="some-id" for a button and data-toggleblock="some-id" for a dropdown block.
codepen demo: https://codepen.io/ktr92/pen/LYgyqZE
Solution example
HTML
<div>
<div class="wrapper">
<button data-toggleclick="block1">Open block 1</button>
<div data-toggleblock="block1">
Block 1
</div>
</div>
<div class="wrapper">
<button data-toggleclick="block2" >Open block 2</button>
<div data-toggleblock="block2">
Block 2
</div>
</div>
</div>
CSS
[data-toggleblock] {
display: none;
}
[data-toggleblock].active {
display: block;
}
.container {
width: 320px;
}
.wrapper {
height: 100px;
position: relative;
width: 320px;
}
[data-toggleblock] {
padding: 10px;
border: 1px solid #000;
margin-bottom: 30px;
position: absolute;
top: 50px;
width: 100%;
z-index: 1;
}
[data-toggleclick] {
background: #ccc;
padding: 10px 10px;
border: none;
display: block;
width: 100%;
font-size: 20px;
}
JS (jquery)
// show element by click on button
$('[data-toggleclick]').each(function() {
$(this).on('click', function(e) {
$(this).toggleClass('active')
e.preventDefault()
let dropdown = $(this).data('toggleclick')
// if you want to hide all other dropdowns
// $('[data-toggleblock].active').not($(`[data-toggle=${dropdown}]`)).removeClass('active')
// $('[data-toggleclick].active').not($(`[data-toggleclick=${dropdown}]`)).removeClass('active')
$(`[data-toggleblock=${dropdown}]`).toggleClass('active')
})
})
Top comments (0)