BeefUp: Toggle buttons

jQuery BeefUp example

by Sascha KĂĽnstler

HTML

<script src="https://cdn.rawgit.com/Schascha/BeefUp/master/dist/js/jquery.beefup.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/Schascha/BeefUp/b2059ab0/dist/css/jquery.beefup.css">
<button id="toggle1">Toggle 1</button>
<button id="toggle2">Toggle 2</button>
<button id="toggle3">Toggle 3</button>
<button id="open-all">Open all</button>
<button id="close-all">Close all</button>

<article class="beefup" id="beefup1">
  <h2 class="beefup__head">Accordion 1</h2>
  <div class="beefup__body">
    Text
  </div>
</article>

<article class="beefup" id="beefup2">
  <h2 class="beefup__head">Accordion 2</h2>
  <div class="beefup__body">
    Text
  </div>
</article>

<article class="beefup" id="beefup3">
  <h2 class="beefup__head">Accordion 3</h2>
  <div class="beefup__body">
    Text
  </div>
</article>

CSS

html {
   box-sizing: border-box;
   font-family: -apple-system, Roboto, Helvetica, Arial, sans-serif;
   color: #222;
}

*,
*::before,
*::after {
   box-sizing: inherit;
}

button {
  border: solid 1px #ddd;
  border-radius: 4px;
  color: inherit;
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  margin: 0 5px 5px 0;
  padding: 15px 45px;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.5, 0.03, 0.5, 0.8);
}

button:hover {
  background: #222;
  border-color: #222;
  color: #fff;
}

h2 {
  margin: 0;
}

JavaScript

$(function() {
  var $beefup = $('.beefup').beefup();

  $('#open-all').on('click', function() {
    $beefup.open();
  });

  $('#close-all').on('click', function() {
    $beefup.close();
  });

  $('#toggle1').on('click', function() {
    $beefup.click($('#beefup1'));
  });

  $('#toggle2').on('click', function() {
    $beefup.click($('#beefup2'));
  });

  $('#toggle3').on('click', function() {
    $beefup.click($('#beefup3'));
  });
});