Flexbox Horizontal Accordion Made with HTML CSS jQuery

This Flexbox Horizontal Accordion will help you showcase your services as a header banner with cache title and short description, There is 4 section in this slider when ever you click on any section it slides and display inside content, best fit to prest your services as nice looking Flexbox Horizontal Accordion form.

Flexbox Horizontal Accordion Made with HTML CSS jQuery

HTML

<ul>
  <li>
    <div class="section-title">
      <h2>Section 1</h2>
    </div>
    <div class="section-content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit voluptatum temporibus dicta reprehenderit tempore quisquam consequuntur porro omnis laboriosam praesentium at et sapiente, provident sit! Suscipit recusandae, ab ratione dignissimos.
    </div>
  </li>
  <li class="active">
    <div class="section-title">
      <h2>Section 2</h2>
    </div>
    <div class="section-content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora totam delectus, eius nostrum aspernatur voluptas enim fugit ipsa magni voluptatem, odio sit accusamus vel id, commodi consequuntur possimus repellat necessitatibus!
    </div>
  </li>
  <li>
    <div class="section-title">
      <h2>Section 3</h2>
    </div>
    <div class="section-content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur saepe vel facilis quae nihil ad aspernatur ex delectus. Tenetur nulla voluptates similique quos, quia possimus, magnam esse natus quis ipsa.
    </div>
  </li>
  <li>
    <div class="section-title">
      <h2>Section 4</h2>
    </div>
    <div class="section-content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, optio illo, delectus deleniti animi accusamus. Laboriosam maiores totam provident aliquam. Unde, incidunt amet officia a obcaecati, ducimus at molestiae nemo.
    </div>    
  </li>
</ul>


CSS

* {
  box-sizing: border-box;
  /*   border: 1px solid black; */
}
 
body {
  font-family: 'Lato';
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizelegibility;
}
 
ul {
  display: flex;
  min-height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style-type: none;
}
 
li {
  flex: 1;
  display: flex;
  align-items: stretch;
  padding: 20px;
  background: #E74C3C;
  cursor: pointer;
  transition: all .5s ease;
}
li:hover {
  background: #e53f2e;
}
li.active {
  flex: 5;
  background: #fff;
  cursor: default;
}
li.active h2 {
  color: #E74C3C;
}
li.active .section-content {
  flex: 4;
  opacity: 1;
  transform: scaleX(1);
  color: #E74C3C;
}
li .section-title {
  flex: 1;
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  color: white;
}
li .section-title h2 {
  margin: 0;
  transform: rotate(-90deg);
  white-space: nowrap;
}
li .section-content {
  flex: 1;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  opacity: 0;
  transition: all .25s .1s ease-out;
}


JS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var section = $('li');
 
function toggleAccordion() {
  section.removeClass('active');
  $(this).addClass('active');
}
 
section.on('click', toggleAccordion);
</script>

See live demo and download source code.
|

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

This awesome script developed by arjancodes. Visit their official repository for more information and follow for future updates.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.