Flexbox Vertical Accordion | Codepen

Site URL: https://ievaviphoto.com/

Hello, people!
Would anyone give me a hand implementing this code onto my site? Would love to know the logic behind this! Thanks loads!!

https://codepen.io/arjancodes/pen/gbweYB

My site www.ievaviphoto.com

  Add a Code Block

<ul class="codepen">
  <li>
    <div class="section-title">
      <h2>Section 1</h2>
    </div>
    <div class="section-content">
      <p>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.</p>
    </div>
  </li>
  <li class="active">
    <div class="section-title">
      <h2>Section 2</h2>
    </div>
    <div class="section-content">
      <p>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!</p>
    </div>
  </li>
  <li>
    <div class="section-title">
      <h2>Section 3</h2>
    </div>
    <div class="section-content">
      <p>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.</p>
    </div>
  </li>
  <li>
    <div class="section-title">
      <h2>Section 4</h2>
    </div>
    <div class="section-content">
      <p>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.</p>
    </div>    
  </li>
</ul>
<style>
  ul.codepen {
  display: flex;
  min-height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style-type: none;
}

 ul.codepen li {
  flex: 1;
  display: flex;
  align-items: stretch;
  padding: 20px;
  background: #E74C3C;
  cursor: pointer;
  transition: all 0.5s ease;
}
 ul.codepen li:hover {
  background: #e53f2e;
}
 ul.codepen li.active {
  flex: 5;
  background: #fff;
  cursor: default;
}
 ul.codepen li.active h2 {
  color: #E74C3C;
}
 ul.codepen li.active .section-content {
  flex: 4;
  opacity: 1;
  transform: scaleX(1);
  color: #E74C3C;
}
 ul.codepen li .section-title {
  flex: 1;
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  color: white;
}
 ul.codepen li .section-title h2 {
  margin: 0;
  transform: rotate(-90deg);
  white-space: nowrap;
}
 ul.codepen li .section-content {
  flex: 1;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  opacity: 0;
  transition: all 0.25s 0.1s ease-out;
}
</style>
<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>

On 7/27/2021 at 12:08 PM, tuanphan said:

  Add a Code Block

<ul class="codepen">
  <li>
    <div class="section-title">
      <h2>Section 1</h2>
    </div>
    <div class="section-content">
      <p>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.</p>
    </div>
  </li>
  <li class="active">
    <div class="section-title">
      <h2>Section 2</h2>
    </div>
    <div class="section-content">
      <p>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!</p>
    </div>
  </li>
  <li>
    <div class="section-title">
      <h2>Section 3</h2>
    </div>
    <div class="section-content">
      <p>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.</p>
    </div>
  </li>
  <li>
    <div class="section-title">
      <h2>Section 4</h2>
    </div>
    <div class="section-content">
      <p>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.</p>
    </div>    
  </li>
</ul>
<style>
  ul.codepen {
  display: flex;
  min-height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style-type: none;
}

 ul.codepen li {
  flex: 1;
  display: flex;
  align-items: stretch;
  padding: 20px;
  background: #E74C3C;
  cursor: pointer;
  transition: all 0.5s ease;
}
 ul.codepen li:hover {
  background: #e53f2e;
}
 ul.codepen li.active {
  flex: 5;
  background: #fff;
  cursor: default;
}
 ul.codepen li.active h2 {
  color: #E74C3C;
}
 ul.codepen li.active .section-content {
  flex: 4;
  opacity: 1;
  transform: scaleX(1);
  color: #E74C3C;
}
 ul.codepen li .section-title {
  flex: 1;
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  color: white;
}
 ul.codepen li .section-title h2 {
  margin: 0;
  transform: rotate(-90deg);
  white-space: nowrap;
}
 ul.codepen li .section-content {
  flex: 1;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  opacity: 0;
  transition: all 0.25s 0.1s ease-out;
}
</style>
<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>

 

Any chance how this code could be tweaked for mobile? That it could change direction to one column and all go down (like in the attached example)?

hey @tuanphan and @ievavi were you ever able to figure out how to make it stacked on mobile?  Additionally I'm wondering how I might be able to change the text direction to be reading upwards instead of downwards?  I think it's just editing the directional degrees.  Lmk if you know, thanks!!!  Also I'm wondering if the codepen has to be quoted in the html as it is in Tuanphan's answer?  I'd love to design a similar concept but personalize it with some more customization.

On 2/28/2022 at 10:35 PM, DevonHarris said:

hey @tuanphan and @ievavi were you ever able to figure out how to make it stacked on mobile?  Additionally I'm wondering how I might be able to change the text direction to be reading upwards instead of downwards?  I think it's just editing the directional degrees.  Lmk if you know, thanks!!!  Also I'm wondering if the codepen has to be quoted in the html as it is in Tuanphan's answer?  I'd love to design a similar concept but personalize it with some more customization.

Can you share link to page where you have problem? We will try checking it again

On 3/3/2022 at 5:03 AM, tuanphan said:

Can you share link to page where you have problem? We will try checking it again

Thanks @tuanphan but I just solved it by editing the degree direction of the text within the code 🙂. Square Stylist has a gorgeous sideways accordion plugin too if anyone is looking for an easy solution.  Not sure how she did it, but it looks cool!

https://www.squarestylist.com/shop/vertical-tabs