babblewrap Posted February 18, 2021 Share Posted February 18, 2021 Hi guys, I'm trying to recreate the tab feature similar to this kickstarter style product pitch page. Is there a way to do with on Squarespace without a plugin? If so, could you please point me in the right direction? Thanks! Beyondspace 1 Link to comment
humxahafeex Posted February 18, 2021 Share Posted February 18, 2021 Hi , You can create it on your own without plugin but it requires little knowledge of css , please visit the following link for more info. https://www.w3schools.com/w3css/w3css_tabulators.asp Hope it helps 🙂 babblewrap and Beyondspace 2 Link to comment
babblewrap Posted February 22, 2021 Author Share Posted February 22, 2021 Thank you, humxahafeex. I'll give it a go. Link to comment
tuanphan Posted February 28, 2021 Share Posted February 28, 2021 On 2/22/2021 at 9:00 PM, babblewrap said: Thank you, humxahafeex. I'll give it a go. Have you solved it yet? 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
babblewrap Posted March 12, 2021 Author Share Posted March 12, 2021 Hi Tuan, I gave it a go and it is outside of my skillset. Link to comment
tuanphan Posted March 23, 2021 Share Posted March 23, 2021 On 3/12/2021 at 5:46 PM, babblewrap said: Hi Tuan, I gave it a go and it is outside of my skillset. Hi. Here some free code. Let me know which code you like, I will send the code for SS. https://codepen.io/shayhowe/pen/klAvu https://codepen.io/search/pens?q=tabs 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
ferguswood Posted May 13, 2021 Share Posted May 13, 2021 Hi @tuanphan, I'm after a solution to this problem also. I like the look of the code from: https://codepen.io/shayhowe/pen/klAvu Do you think you could send over the code for SS?? Thank you! Link to comment
tuanphan Posted May 14, 2021 Share Posted May 14, 2021 22 hours ago, ferguswood said: Hi @tuanphan, I'm after a solution to this problem also. I like the look of the code from: https://codepen.io/shayhowe/pen/klAvu Do you think you could send over the code for SS?? Thank you! Add a Code Block >> Paste this Codepen code <div class="tabs"> <ul class="tabs-nav"> <li><a href="#tab-1">Features</a></li> <li><a href="#tab-2">Details</a></li> </ul> <div class="tabs-stage"> <div id="tab-1"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec neque nisi, dictum aliquet lectus.</p> </div> <div id="tab-2"> <p>Phasellus pharetra aliquet viverra. Donec scelerisque tincidunt diam, eu fringilla urna auctor at.</p> </div> </div> </div> <style> .tabs { max-width: 538px; } .tabs-nav li { float: left; width: 50%; } .tabs-nav li:first-child a { border-right: 0; border-top-left-radius: 6px; } .tabs-nav li:last-child a { border-top-right-radius: 6px; } a { background: #eaeaed; border: 1px solid #cecfd5; color: #0087cc; display: block; font-weight: 600; padding: 10px 0; text-align: center; text-decoration: none; } a:hover { color: #ff7b29; } .tab-active a { background: #fff; border-bottom-color: transparent; color: #2db34a; cursor: default; } .tabs-stage { border: 1px solid #cecfd5; border-radius: 0 0 6px 6px; border-top: 0; clear: both; padding: 24px 30px; position: relative; top: -1px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> // Show the first tab by default $('.tabs-stage div').hide(); $('.tabs-stage div:first').show(); $('.tabs-nav li:first').addClass('tab-active'); // Change tab class and display content $('.tabs-nav a').on('click', function(event){ event.preventDefault(); $('.tabs-nav li').removeClass('tab-active'); $(this).parent().addClass('tab-active'); $('.tabs-stage div').hide(); $($(this).attr('href')).show(); }); </script> 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
ferguswood Posted May 14, 2021 Share Posted May 14, 2021 Hi @tuanphan, the above code gives me this result (see attached) - any way to stop the grey boxing of the logo, tabs etc? Link to comment
Solution tuanphan Posted May 14, 2021 Solution Share Posted May 14, 2021 Remove above & try new code <div class="tabs"> <ul class="tabs-nav"> <li><a href="#tab-1">Features</a></li> <li><a href="#tab-2">Details</a></li> </ul> <div class="tabs-stage"> <div id="tab-1"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec neque nisi, dictum aliquet lectus.</p> </div> <div id="tab-2"> <p>Phasellus pharetra aliquet viverra. Donec scelerisque tincidunt diam, eu fringilla urna auctor at.</p> </div> </div> </div> <style> .tabs { max-width: 538px; } .tabs-nav li { float: left; width: 50%; } .tabs-nav li:first-child a { border-right: 0; border-top-left-radius: 6px; } .tabs-nav li:last-child a { border-top-right-radius: 6px; } .tabs a { background: #eaeaed; border: 1px solid #cecfd5; color: #0087cc; display: block; font-weight: 600; padding: 10px 0; text-align: center; text-decoration: none; } .tabs a:hover { color: #ff7b29; } .tab-active a { background: #fff; border-bottom-color: transparent; color: #2db34a; cursor: default; } .tabs-stage { border: 1px solid #cecfd5; border-radius: 0 0 6px 6px; border-top: 0; clear: both; padding: 24px 30px; position: relative; top: -1px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> // Show the first tab by default $('.tabs-stage div').hide(); $('.tabs-stage div:first').show(); $('.tabs-nav li:first').addClass('tab-active'); // Change tab class and display content $('.tabs-nav a').on('click', function(event){ event.preventDefault(); $('.tabs-nav li').removeClass('tab-active'); $(this).parent().addClass('tab-active'); $('.tabs-stage div').hide(); $($(this).attr('href')).show(); }); </script> fleurdelis and babblewrap 2 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
KristineNeilStudio Posted September 22, 2021 Share Posted September 22, 2021 @tuanphan - I have a client that I think must have found your code and she is having the same problem with the grey boxes as @ferguswood above. Any thoughts on how to fix? Thanks! Read my eCommerce Blog or Subscribe to my eCommerce Newsletter for all things Squarespace x eCommerce. Link to comment
tuanphan Posted September 24, 2021 Share Posted September 24, 2021 On 9/23/2021 at 3:52 AM, KristineNeilStudio said: @tuanphan - I have a client that I think must have found your code and she is having the same problem with the grey boxes as @ferguswood above. Any thoughts on how to fix? Thanks! Can you share link to page where you have problem? 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
KristineNeilStudio Posted September 24, 2021 Share Posted September 24, 2021 8 hours ago, tuanphan said: Can you share link to page where you have problem? https://topnotchhomes.squarespace.com/models/p/fairview-4w3rt - right now I just have this code in the additional info section of this one product. Read my eCommerce Blog or Subscribe to my eCommerce Newsletter for all things Squarespace x eCommerce. Link to comment
creedon Posted September 24, 2021 Share Posted September 24, 2021 @KristineNeilStudio Site-wide password? Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
KristineNeilStudio Posted September 24, 2021 Share Posted September 24, 2021 1 minute ago, creedon said: Site-wide password? Texas Read my eCommerce Blog or Subscribe to my eCommerce Newsletter for all things Squarespace x eCommerce. Link to comment
creedon Posted September 24, 2021 Share Posted September 24, 2021 @KristineNeilStudio @ferguswood Ah. I see the problem. The original pen is styling the a tag without restricting it specifically to the tab effect. One solution would be to change the following lines... a { a:hover { ...to... .tabs-nav a { .tabs-nav a:hover { Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
KristineNeilStudio Posted September 24, 2021 Share Posted September 24, 2021 3 minutes ago, creedon said: One solution would be to change the following lines... That definitely worked to get rid of the weird grey boxes! Now there are just two random bullets by the tabs to get rid of somehow! creedon 1 Read my eCommerce Blog or Subscribe to my eCommerce Newsletter for all things Squarespace x eCommerce. Link to comment
creedon Posted September 24, 2021 Share Posted September 24, 2021 (edited) On 9/24/2021 at 11:34 AM, KristineNeilStudio said: Now there are just two random bullets by the tabs to get rid of somehow! Fascinating. I don't have a 100% handle on this but it appears either codepen or the pen code author use a thing called meyer reset. This mr CSS resets a lot of user agent style sheets to nothing. Normally your browser is making a lot of decisions about how things look if no one provided CSS to tell it how to style things. A default look if you will. Some designers don't want to be told by each browser vendor how their designs should look so they use this reset technique which provides a really blank slate to start from. I would not suggest using the reset technique for a SS site. So the solution is to knock out the list style for the tabs. Add the following ruleset to the style tag. .tabs-nav { list-style : none; padding-inline-start : unset; } This also takes care of the padding to the left of the first tab you may have noticed. Let us know how it goes. Edited September 26, 2021 by creedon Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
KristineNeilStudio Posted September 25, 2021 Share Posted September 25, 2021 21 hours ago, creedon said: Let us know how it goes. Thanks @creedon! I think it's fixed! My client liked the "tabs without a plugin" idea a lot so glad we could make it happen! creedon 1 Read my eCommerce Blog or Subscribe to my eCommerce Newsletter for all things Squarespace x eCommerce. 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