accordion vertical accordion, squarespace

Site URL: https://rose-sponge-jyn3.squarespace.com/config/

I want the accordion block to be vertical like this?

https://www.gtheimagineers.com/en.html

You can use this plugin. Seems expensive.

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

I remember on the Forum, there was a free code with Code Block, that could do the same thing (seems like I shared that code), but can't remember where it was from. You can try searching.

@tuanphan Any chance you have located the Code Block code you are referring to? I tried searching for it myself and wasn't able to locate it.

On 1/13/2023 at 4:23 AM, Nancygallardo562 said:

@tuanphan Any chance you have located the Code Block code you are referring to? I tried searching for it myself and wasn't able to locate it.

Hi,

You can also try search on codepen or google with this keyword

"vertical tabs - codepen"

or

"vertical accordion - codepen"

I see some examples, you can choose one then send link, we can help you convert it to Squarespace Code Block

https://codepen.io/tag/vertical accordion

hi @tuanphan, I have found this codepen and I hope you can help me convert it for my squarespace site.https://codepen.io/abraytondesign/pen/XZYGbx

Would it be possible to add images and change the colors?

Kind regards 

kaitlin

On 6/9/2023 at 6:27 PM, KaitlinRae said:

hi @tuanphan, I have found this codepen and I hope you can help me convert it for my squarespace site.https://codepen.io/abraytondesign/pen/XZYGbx

Would it be possible to add images and change the colors?

 

Kind regards 

kaitlin

Edit page where you want to add this > Add a Code Block > Paste this code

<div class="accordian accordian--horizontal">
  <div class="accordian__item active">
    <h1 class="accordian__heading"><span class="arrow-right"></span>Day One</h1>
    <div class="accordian__body">
      <h3 class="text-left">Sunday&nbsp; <small class="text-right text-muted lead">April 6, 2019</small></h3>
      <div class="w-100"></div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis ex suscipit odio accusantium debitis, alias reiciendis ea dolore amet beatae quia est, vitae dolorem. Totam aliquid accusantium id qui. Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Sit at dolorem sint! Recusandae voluptas ducimus architecto earum iure et aliquam, non velit accusamus, illo voluptate, dolore eos in vitae nihil!</p>
      <div class="row text-center justify-content-around mt-4">
        <div class="col-md-6">
          <i class="fas fa-user-circle mt-1 sunset" data-fa-transform="grow-20"></i>
          <p class="mt-3"><strong>Daytime dress</strong> <br /><b class="aqua">Travel Attire</b></p>
        </div>
        <div class="col-md-6">
          <i class="fas fa-user-circle mt-1 jazzberry" data-fa-transform="grow-20"></i>
          <p class="mt-3"><strong>Evening dress</strong> <br /><b class="aqua">Resort Casual</b></p>
        </div>
      </div>
    </div>
  </div>
  <div class="accordian__item">
    <h1 class="accordian__heading"><span class="arrow-right"></span>Day Two</h1>
    <div class="accordian__body animated fadeIn">
      <h3 class="text-left">Monday&nbsp; <small class="text-right text-muted lead">April 7, 2019</small></h3>
      <div class="w-100"></div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis ex suscipit odio accusantium debitis, alias reiciendis ea dolore amet beatae quia est, vitae dolorem. Totam aliquid accusantium id qui. Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Sit at dolorem sint! Recusandae voluptas ducimus architecto earum iure et aliquam, non velit accusamus, illo voluptate, dolore eos in vitae nihil!</p>
      <div class="row text-center justify-content-around mt-4">
        <div class="col-md-6">
          <i class="fas fa-user-circle mt-1 sunset" data-fa-transform="grow-20"></i>
          <p class="mt-3"><strong>Daytime dress</strong> <br /><b class="aqua">Resort Casual</b></p>
        </div>
        <div class="col-md-6">
          <i class="fas fa-user-circle mt-1 jazzberry" data-fa-transform="grow-20"></i>
          <p class="mt-3"><strong>Evening dress</strong> <br /><b class="aqua">Resort Attire</b></p>
        </div>
      </div>
    </div>
  </div>
  <div class="accordian__item">
    <h1 class="accordian__heading"><span class="arrow-right"></span>Day Three</h1>
    <div class="accordian__body">
      <h3 class="text-left">Tuesday&nbsp; <small class="text-right text-muted lead">April 8, 2019</small></h3>
      <div class="w-100"></div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis ex suscipit odio accusantium debitis, alias reiciendis ea dolore amet beatae quia est, vitae dolorem. Totam aliquid accusantium id qui. Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Sit at dolorem sint! Recusandae voluptas ducimus architecto earum iure et aliquam, non velit accusamus, illo voluptate, dolore eos in vitae nihil!</p>
      <div class="row text-center justify-content-around mt-4">
        <div class="col-md-6">
          <i class="fas fa-user-circle mt-1 sunset" data-fa-transform="grow-20"></i>
          <p class="mt-3"><strong>Daytime dress</strong> <br /><b class="aqua">Resort Casual</b></p>
        </div>
        <div class="col-md-6">
          <i class="fas fa-user-circle mt-1 jazzberry" data-fa-transform="grow-20"></i>
          <p class="mt-3"><strong>Evening dress</strong> <br /><b class="aqua">Resort Elegant</b></p>
        </div>
      </div>
    </div>
  </div>
  <div class="accordian__item">
    <h1 class="accordian__heading"><span class="arrow-right"></span>Day Four</h1>
    <div class="accordian__body">
      <h3 class="text-left">Wednesday&nbsp; <small class="text-right text-muted lead">April 9, 2019</small></h3>
      <div class="w-100"></div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis ex suscipit odio accusantium debitis, alias reiciendis ea dolore amet beatae quia est, vitae dolorem. Totam aliquid accusantium id qui. Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Sit at dolorem sint! Recusandae voluptas ducimus architecto earum iure et aliquam, non velit accusamus, illo voluptate, dolore eos in vitae nihil!</p>
      <div class="row text-center justify-content-around mt-4">
        <div class="col-md-6">
          <i class="fas fa-user-circle mt-1 sunset" data-fa-transform="grow-20"></i>
          <p class="mt-3"><strong>Daytime dress</strong> <br /><b class="aqua">Resort Casual</b></p>
        </div>
        <div class="col-md-6">
          <i class="fas fa-user-circle mt-1 jazzberry" data-fa-transform="grow-20"></i>
          <p class="mt-3"><strong>Evening dress</strong> <br /><b class="aqua">Resort Attire</b></p>
        </div>
      </div>
    </div>
  </div>
  <div class="accordian__item">
    <h1 class="accordian__heading"><span class="arrow-right"></span>Day Five</h1>
    <div class="accordian__body">
      <h3 class="text-left">Thursday&nbsp; <small class="text-right text-muted lead">April 10, 2019</small></h3>
      <div class="w-100"></div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis ex suscipit odio accusantium debitis, alias reiciendis ea dolore amet beatae quia est, vitae dolorem. Totam aliquid accusantium id qui. Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Sit at dolorem sint! Recusandae voluptas ducimus architecto earum iure et aliquam, non velit accusamus, illo voluptate, dolore eos in vitae nihil!</p>
      <div class="row text-center justify-content-around mt-4">
        <div class="col-md-6">
          <i class="fas fa-user-circle mt-1 sunset" data-fa-transform="grow-20"></i>
          <p class="mt-3"><strong>Daytime dress</strong> <br /><b class="aqua">Travel Attire</b></p>
        </div>
      </div>
    </div>
  </div>
</div>
<style>
  .aqua {
  color: #62cbc9;
}

.jazzberry {
  color: #AA0061;
}

.sunset {
  color: #E07C00;
}

h3 {
  color: #443635;
}

.accordian {
  display: flex;
  height: 400px;
  max-width: 600px;
  font-size: 14.4px;
}
.accordian--horizontal .accordian__item {
  width: 50px;
  display: flex;
  position: relative;
  border-top: 2px #62cbc9 solid;
  border-bottom: 2px #62cbc9 solid;
}
.accordian--horizontal .accordian__item ul {
  list-style-type: none;
}
.accordian--horizontal .accordian__item ul li {
  margin: 0 0 15px 0;
  line-height: 1.2;
}
.accordian--horizontal .accordian__item:last-of-type {
  border-right: 2px #62cbc9 solid;
}
.accordian--horizontal .accordian__item:not(active) {
  border-left: 2px #ffffff solid;
}
.accordian--horizontal .accordian__item:first-child {
  border-left: none;
}
.accordian--horizontal .accordian__heading {
  color: #ffffff;
  max-width: 60px;
  height: 100%;
  -ms-writing-mode: tb-lr;
      writing-mode: vertical-lr;
  margin: 0px;
  cursor: pointer;
}
.accordian--horizontal .accordian__body {
  min-width: calc(590px - 272px);
  overflow: hidden;
  color: #443635;
}
.accordian__item {
  flex-grow: 0;
  transition: flex-grow 0.25s ease-in;
  overflow: hidden;
  background-color: #ffffff;
}
.accordian__item.active {
  flex-grow: 1;
}
.accordian__heading {
  font-family: sans-serif;
  font-size: 1.8rem;
  line-height: 0.75;
  padding: 1rem;
  background-color: #62cbc9;
}
.accordian__body {
  padding: 1rem;
  color: #ffffff;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
  $(".accordian__item").on("click", function() {
  $(this)
    .addClass("active")
    .siblings()
    .removeClass("active");
});

</script>

With image/color, you can send detail, we can adjust code easier

hi @tuanphan, I have tried this code and it works, however is messes around a lot with my site. It changes the screen size, the fonts and colors. I have attached images of the before and after images. 

BEFORE: this is what my site looked like before adding the code

AFTER: this is what my site looks like after adding the code

I hope you can help me with this

On 6/13/2023 at 1:20 PM, KaitlinRae said:

hi @tuanphan, I have tried this code and it works, however is messes around a lot with my site. It changes the screen size, the fonts and colors. I have attached images of the before and after images. 

BEFORE: this is what my site looked like before adding the code

 

AFTER: this is what my site looks like after adding the code

 

I hope you can help me with this

Can you share link to page where you added the code?

the site is https://seahorse-chimes-nwsd.squarespace.com/ and my password is: hello

it was the homepage, however I have removed the code temporarily 

On 6/17/2023 at 5:05 PM, KaitlinRae said:

the site is https://seahorse-chimes-nwsd.squarespace.com/ and my password is: hello

it was the homepage, however I have removed the code temporarily 

You can duplicate the page & add code, then we can check easier