Jump to content

Vertical side tabs 7.1

Recommended Posts

On 4/19/2022 at 3:07 AM, Baileyk2011 said:

Hi! I used the code at the beginning of this thread and like it a lot! However, I need to make it mobile responsive. Can anyone help?

 

Please set the section titled "Photography Subscriptions"

  • In mobile, I would like the accordion to become vertical > the clickable headlines ("Life is Now", "Tell Me More" and "How This Works") would be stacked on top of each other and not turned sideways anymore.
  • I would also like the box itself to become larger, so that all the text can fit (right now, a lot of the text is cut off when viewing the site in mobile). The text can also be smaller in mobile to help fit all the text inside the box.

Site: https://badger-vibraphone-bwnl.squarespace.com/

Password: WHIT

 

Any help is much appreciated!

Screen Shot 2022-04-18 at 4.05.44 PM.png

Hi,

It looks like you removed the tab? DO you still need help? If yes, can you share link to page where you use tabs? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
14 hours ago, CoralJuneDesigns said:

is there a way to make the codepen mobile responsive

It's going to be hard to know what might/can be done without knowing your site URL.

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
16 hours ago, creedon said:

It's going to be hard to know what might/can be done without knowing your site URL.

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

Thanks @creedon

Site: https://orchid-amphibian-wd6a.squarespace.com

password: 1111

I appreciate any help

Link to comment
On 6/7/2022 at 7:16 AM, CoralJuneDesigns said:

is there a way to make the codepen mobile responsive (making the vertical tabs horizontal)? Can't find any answers above if anyone managed.

Here is my thinking the effect you have now can't be easily manipulated into a horizontal orientation. However, if the author of that effect happened to create a horizontal version, there is a way you could add that to the page. The basic technique is to add another page section. Put the horizontal version in the new section. Duplicate the content from the vertical version. Then use CSS to hide/show the sections based on desktop/mobile.

Do you think something like this would work for you?

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
21 hours ago, creedon said:

Here is my thinking the effect you have now can't be easily manipulated into a horizontal orientation. However, if the author of that effect happened to create a horizontal version, there is a way you could add that to the page. The basic technique is to add another page section. Put the horizontal version in the new section. Duplicate the content from the vertical version. Then use CSS to hide/show the sections based on desktop/mobile.

Do you think something like this would work for you?

Thanks so much- I'm pretty new to all this coding so this this all seems complicated to me but I will try and figure it out

 

Link to comment
On 6/9/2022 at 12:01 PM, CoralJuneDesigns said:

I'm pretty new to all this coding so this this all seems complicated to me

Coding is complicated but as you get more exposure to it, it gets a bit easier to understand the generalities! 🙂

The first task I recommend you tackle is finding a suitable horizontal tab effect. SS has an accordion block which might work for your needs but it would look radically different from your horizontal effect. So if you want consistency then finding a tab effect from one author to handle both orientations is required.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 1 month later...
On 7/20/2021 at 1:22 PM, LisaBennett said:

Thanks. This is super helpful. If I wanted to add images inside the vertical tabs using this CodePen code where would I insert it? (attached image for reference)

 

vertical tab image.jpeg

Where can I get the code to achieve these taps and where is it applied?

Link to comment
  • 2 weeks later...
  • 3 months later...
17 hours ago, nicolettely said:

Hey @WillMyers I just purchased this plugin today! Thanks. One Q- I cant figure out how to change the color of the drop shadow. Any tips on that?

Thanks!

Happy to help, what page do you have this installed on? I'll need to look there to help troubleshoot. 

Feel free to submit a ticket here as well if you'd like: will-myers.com/ask

Hey there, my name is Will and I help Squarespace designers and developers with my plugins, tutorials, and my Code Curious Membership
  
I would be happy to answer any questions you have about Javascript, CSS, or the meaning of life  - I'm an expert in 2 of these. 

Youtube | Website

Link to comment
  • 3 months later...

@tuanphan I'm running into the same issues with Mobile, I've read this whole thread and it's helped me so much along the way to customize my code. I'm stuck in figuring out how to fix the images from changes sizes, and when I adjust for iPad and mobile, and just doesn't seem to work correctly. 

– My concerns are keeping the tabs the same size throughout iPad and mobile
– Removing the columns for iPad and mobile and having the image move after the title service (I added a sample screenshot of my goal)

Website link:https://piccolo-antelope-5p6t.squarespace.com/

<ul class="main-box">


  
<li class="box active">
  <span>Graphic Design</span>
  <div class="detail active">
    <div style="display: flex;">
      <div style="margin-right: 35px;">
        <img src="https://static1.squarespace.com/static/62e03cf73c1b5e33362890fd/t/642754992c206e2593cf878a/1680299162048/Graphic_Design_Computer.png" alt="A handdrawn illustration of a computer with a smiley face with bolt eyes and a pencil on the screen" style="width: 100%; max-width: 650px;">
      </div>
      <div class="detail_text" style="margin-left: 20px;">
        <p><b><div style="letter-spacing: 0.2em;">SERVICES</div></b></p>	
        <p><h1><i>Graphic</i> Design</h1></p>
        <p>
          Refine your brand with vivid, double-taking, and eye-catching creative designs. Everything from custom graphics, product packaging, website design, email campaigns, and everything in between!
        </p>
      </div>
    </div>
  </div>
</li>
  
   <li class="box">
  <span>Product Content</span>
  <div class="detail">
    <div style="display: flex;">
      <div style="margin-right: 20px;">
        <img src="https://static1.squarespace.com/static/62e03cf73c1b5e33362890fd/t/642754a25294290205acc034/1680299170293/Product_Content_Light.png" alt=“Illustration of a light soft boxstyle="width: 100%; max-width: 350px;">
      </div>
      <div class="detail_text" style="margin-left: 20px;">
        <p><b><div style="letter-spacing: 0.2em;">SERVICES</div></b></p>  
        <p><h1><i>Product</i> Content</h1></p>
        <p>
             If you're looking for styled product shots, e-commerce images, or lifestyle shots that you can use across your website and social media channels.
        </p>
      </div>
    </div>
  </div>
</li>

<li class="box">
    <span>Brand Identity</span>
    <div class="detail">
      <div style="display: flex;">
        <div style="margin-right: 20px;">
          <img src="https://static1.squarespace.com/static/62e03cf73c1b5e33362890fd/t/64275a9e2c206e2593d0a612/1680300702265/Brand_Identity_Stationary.png" alt="Illustration of a branding kit stationary" style="width: 100%; max-width: 350px;">
        </div>
        <div class="detail_text" style="margin-left: 20px;">
          <p><b><div style="letter-spacing: 0.2em;">SERVICES</div></b></p>  
          <p><h1><i>Brand</i> Identity</h1></p>
          <p>
            A great brand is one that looks good both online and off, I’ll work with you to create a look that is both professional and friendly.
        </p>
      </div>
    </div>
  </div>
</li>
  
</ul>



<style>
  @import url('https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap');


body 

.main-box
{
    display: flex;
    background: #eca587;
    margin: 0px auto 0px auto;
    padding:0;
    width: auto;
}

.box
{

height:500px;
padding:25px;
border-right: 0px solid none;
webkit-transition: 0.8s;
-o-transition: 0.8s;
transition: 0.8s;
position: relative;
overflow: hidden;
list-style: none;
}

.detail
{
    width: 95%;
    height: 100%;
    position: absolute;
    right: 0;
    top:0;
    background: #eee7e3;
    color:#2d2d2b;
    opacity: 0;
    padding:150px;
    box-sizing:border-box;
    webkit-transition: 0.8s;
    -o-transition: 0.8s;
    transition: 0.8s;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}

.box.active
{
    width: 1000% !important;
}

.box.active .detail
{
    opacity: 1;
    -webkit-transition-delay: 0.6s;
    -moz-transition-delay: 0.6s;
    -o-transition-delay: 0.6s;
    transition-delay: 0.6s;
    transform: none;
}

.box span {
    writing-mode: vertical-rl;
    font-size: 15px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2d2d2b;
    text-transform: uppercase;
    letter-spacing: 4px;
    width: 10px;
    transform: rotate(180deg);
    font-weight: 800;
    font-famly: Myriad Pro; 
    cursor: pointer;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
  
}

.box.active span 
{
	left:25px;
	right:auto;
	margin:0;
  font-weight:800
}

.box p 
{
	line-height: 28px;
}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    var getslide = $('.main-box li').length - 1;

    var slidecal = 30/getslide+'%';

    $('.box').css({"width": slidecal});

    $('.box').click(function(){
        $('.box').removeClass('active');
       $(this).addClass('active');
    });
</script>

<style>
  li.box:nth-child(1) {
  	background-color: #b1cec8;
  }
  li.box:nth-child(2) {
  	background-color: #eca587;
  }
  li.box:nth-child(3) {
  	background-color: #eeb6de;
  }
</style>

 

Screenshot 2023-03-31 at 11.26.21 PM.png

Screenshot 2023-03-31 at 11.26.33 PM.png

Screenshot 2023-03-31 at 11.26.45 PM.png

Screenshot 2023-03-31 at 11.32.37 PM.png

Link to comment
On 4/1/2023 at 10:34 AM, Nancygallardo562 said:

@tuanphan I'm running into the same issues with Mobile, I've read this whole thread and it's helped me so much along the way to customize my code. I'm stuck in figuring out how to fix the images from changes sizes, and when I adjust for iPad and mobile, and just doesn't seem to work correctly. 

– My concerns are keeping the tabs the same size throughout iPad and mobile
– Removing the columns for iPad and mobile and having the image move after the title service (I added a sample screenshot of my goal)

Website link:https://piccolo-antelope-5p6t.squarespace.com/

<ul class="main-box">


  
<li class="box active">
  <span>Graphic Design</span>
  <div class="detail active">
    <div style="display: flex;">
      <div style="margin-right: 35px;">
        <img src="https://static1.squarespace.com/static/62e03cf73c1b5e33362890fd/t/642754992c206e2593cf878a/1680299162048/Graphic_Design_Computer.png" alt="A handdrawn illustration of a computer with a smiley face with bolt eyes and a pencil on the screen" style="width: 100%; max-width: 650px;">
      </div>
      <div class="detail_text" style="margin-left: 20px;">
        <p><b><div style="letter-spacing: 0.2em;">SERVICES</div></b></p>	
        <p><h1><i>Graphic</i> Design</h1></p>
        <p>
          Refine your brand with vivid, double-taking, and eye-catching creative designs. Everything from custom graphics, product packaging, website design, email campaigns, and everything in between!
        </p>
      </div>
    </div>
  </div>
</li>
  
   <li class="box">
  <span>Product Content</span>
  <div class="detail">
    <div style="display: flex;">
      <div style="margin-right: 20px;">
        <img src="https://static1.squarespace.com/static/62e03cf73c1b5e33362890fd/t/642754a25294290205acc034/1680299170293/Product_Content_Light.png" alt=“Illustration of a light soft boxstyle="width: 100%; max-width: 350px;">
      </div>
      <div class="detail_text" style="margin-left: 20px;">
        <p><b><div style="letter-spacing: 0.2em;">SERVICES</div></b></p>  
        <p><h1><i>Product</i> Content</h1></p>
        <p>
             If you're looking for styled product shots, e-commerce images, or lifestyle shots that you can use across your website and social media channels.
        </p>
      </div>
    </div>
  </div>
</li>

<li class="box">
    <span>Brand Identity</span>
    <div class="detail">
      <div style="display: flex;">
        <div style="margin-right: 20px;">
          <img src="https://static1.squarespace.com/static/62e03cf73c1b5e33362890fd/t/64275a9e2c206e2593d0a612/1680300702265/Brand_Identity_Stationary.png" alt="Illustration of a branding kit stationary" style="width: 100%; max-width: 350px;">
        </div>
        <div class="detail_text" style="margin-left: 20px;">
          <p><b><div style="letter-spacing: 0.2em;">SERVICES</div></b></p>  
          <p><h1><i>Brand</i> Identity</h1></p>
          <p>
            A great brand is one that looks good both online and off, I’ll work with you to create a look that is both professional and friendly.
        </p>
      </div>
    </div>
  </div>
</li>
  
</ul>



<style>
  @import url('https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap');


body 

.main-box
{
    display: flex;
    background: #eca587;
    margin: 0px auto 0px auto;
    padding:0;
    width: auto;
}

.box
{

height:500px;
padding:25px;
border-right: 0px solid none;
webkit-transition: 0.8s;
-o-transition: 0.8s;
transition: 0.8s;
position: relative;
overflow: hidden;
list-style: none;
}

.detail
{
    width: 95%;
    height: 100%;
    position: absolute;
    right: 0;
    top:0;
    background: #eee7e3;
    color:#2d2d2b;
    opacity: 0;
    padding:150px;
    box-sizing:border-box;
    webkit-transition: 0.8s;
    -o-transition: 0.8s;
    transition: 0.8s;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}

.box.active
{
    width: 1000% !important;
}

.box.active .detail
{
    opacity: 1;
    -webkit-transition-delay: 0.6s;
    -moz-transition-delay: 0.6s;
    -o-transition-delay: 0.6s;
    transition-delay: 0.6s;
    transform: none;
}

.box span {
    writing-mode: vertical-rl;
    font-size: 15px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2d2d2b;
    text-transform: uppercase;
    letter-spacing: 4px;
    width: 10px;
    transform: rotate(180deg);
    font-weight: 800;
    font-famly: Myriad Pro; 
    cursor: pointer;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
  
}

.box.active span 
{
	left:25px;
	right:auto;
	margin:0;
  font-weight:800
}

.box p 
{
	line-height: 28px;
}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    var getslide = $('.main-box li').length - 1;

    var slidecal = 30/getslide+'%';

    $('.box').css({"width": slidecal});

    $('.box').click(function(){
        $('.box').removeClass('active');
       $(this).addClass('active');
    });
</script>

<style>
  li.box:nth-child(1) {
  	background-color: #b1cec8;
  }
  li.box:nth-child(2) {
  	background-color: #eca587;
  }
  li.box:nth-child(3) {
  	background-color: #eeb6de;
  }
</style>

 

Screenshot 2023-03-31 at 11.26.21 PM.png

Screenshot 2023-03-31 at 11.26.33 PM.png

Screenshot 2023-03-31 at 11.26.45 PM.png

Screenshot 2023-03-31 at 11.32.37 PM.png

Do you still need help?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 weeks later...
  • 2 months later...
On 5/16/2023 at 4:58 AM, Nancygallardo562 said:

Hi @tuanphan I could still use your help with this issue, I've been trying to find a solution for the mobile but still haven't had luck. @Gigi-C Hi! How awesome that you used my code! I'm back and ready to try to get this working soon.

Hi @Nancygallardo562, your site looks great, I notice it seems to be mobile responsive now, any chance you can share how you got it to work?

Thank you :) 

Link to comment
  • 1 month later...
  • 2 months later...

@Nancygallardo562Thanks so much for this code! It looks great and is super helpful!!

Wondering if anyone is able to help with resizing the image.  I want the image have no padding and take up 45% of the active box - to look like the screenshot i have added.  Not sure how to do this @tuanphan - any chance you could help with this one? 🙂

Page: https://puma-hexahedron-fbsa.squarespace.com/
Password: NewSiteLove

Link to comment
On 11/24/2023 at 5:54 AM, GPGDesigns said:

@Nancygallardo562Thanks so much for this code! It looks great and is super helpful!!

Wondering if anyone is able to help with resizing the image.  I want the image have no padding and take up 45% of the active box - to look like the screenshot i have added.  Not sure how to do this @tuanphan - any chance you could help with this one? 🙂

Page: https://puma-hexahedron-fbsa.squarespace.com/
Password: NewSiteLove

Use this code to Website Tools (under Not Linked) > Custom CSS

/* image 45 */
.detail.active>div>div:first-child {
    width: 45% !important;
    margin: 0 !important;
}

.detail_text {
    width: calc(55% - 75px) !important;
    margin-left: 75px !important;
}

.detail.active>div>div:first-child img {
    width: 100% !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.