pkc_creative Posted August 22, 2022 Share Posted August 22, 2022 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 hilary 1 Link to comment
tuanphan Posted August 24, 2022 Share Posted August 24, 2022 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. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Nancygallardo562 Posted January 12 Share Posted January 12 @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. Link to comment
tuanphan Posted January 15 Share Posted January 15 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
KaitlinRae Posted June 9 Share Posted June 9 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 Link to comment
tuanphan Posted June 11 Share Posted June 11 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 <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 <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 <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 <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 <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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
KaitlinRae Posted June 13 Share Posted June 13 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 Link to comment
tuanphan Posted June 14 Share Posted June 14 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
KaitlinRae Posted June 17 Share Posted June 17 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 Link to comment
tuanphan Posted June 20 Share Posted June 20 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment