Einzelnen Beitrag anzeigen
  #25 (permalink)  
Alt 11.02.2020, 12:14
cloned cloned ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.176
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Noch eine Lösung mit flexbox:

Code:
$(document).ready(function() {
  $('.js-btn').on('click', function() {
    const $this = $(this),
      $accordion = $('.accordion');

    $this.toggleClass('active');
    var totalActiveElements = $('button.active').length

    if (totalActiveElements > 0) {
      $accordion.find('> div').removeClass('active');

      $('button.active').each(function(e) {
        var id = '#' + $(this).data('for');
        $(id).toggleClass('active');
      });

    } else {
      $accordion.find('> div').removeClass('active'); // if(totalActiveElements == 0);
    }
  });
});
Code:
body {

  font-family: Arial, Helvetica, sans-serif;
  margin: 0px;
  padding: 0px;
}

#top-bar {
  width: 100%;
  height: 40px;
  border: 1px solid grey;
  background-color: #D8D8D8;
}

button.active {
  background-color: yellow;
}

#button {
  text-align: center;

}

button {
  background-color: rgb(208, 219, 224);
}


/* Accordion */

.accordion {
  height: 300px;
  display: flex;
}

#html {
  background-color: #2b5fd6
}

#css {
  background-color: green;
}

#js {
  background-color: red;
}

#output {
  background-color: rgb(211, 211, 211);
}

.accordion > div {
  display: none;
  flex: 1;
}

.accordion > div.active {
  display: block;
}
HTML bleibt gleich.
Mit Zitat antworten