[html css jquery] Reusable script for dropdown elements

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')
  })
})

Blog

[html css jquery] Reusable script for dropdown elements

ktr92

Solution example

Join Our Newsletter. No Spam, Only the good stuff.

Related