Vertical side tabs 7.1

cwilk180 · July 1, 2021

Site URL: https://www.mahacreative.co.nz/

Hi,

I'm trying to have a tab like style side nav similar to this - would anyone know how to do this?

I found this Code pen for something similar but I'm not sure how or where to add it https://codepen.io/skkhan/pen/MWWdXbb

tuanphan · July 2, 2021

Squarestylist has a course on this. $197. https://www.squarestylist.com/shop/vertical-tabs

or Will-Myers plugin ($10) https://www.will-myers.com/products/p/accordion-dropdown-plugin-for-squarespace

@WillMyers I wonder if it is possible to use CSS Flex to invert the bars from horizontal to vertical, to achieve the above effect?

Or you can also add a Code Block >> Paste this CodePen code

<!-- Source: https://codepen.io/skkhan/pen/MWWdXbb -->
<!-- Tweak by @tuanphan -->

<ul class="main-box">
    <li class="box active"><span>Slide One</span>

        <div class="detail active">
			<p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
        </div>
    </li>
    <li class="box"><span>Slide Two</span>
        <div class="detail">
          <p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
        </div>
    </li>
    <li class="box"><span>Slide Three</span>

        <div class="detail">
              <p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
        </div>
    </li>
    <li class="box"><span>Slide Four</span>
    <div class="detail">
          <p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
    </div>
</li>

    <li class="box"><span>Slide Five</span>
        <div class="detail">
           <p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
        </div>
    </li>
</ul>

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


body 

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

.box
{

height: 322px;
padding:15px;
border-right: 1px solid white;
webkit-transition: 0.8s;
-o-transition: 0.8s;
transition: 0.8s;
position: relative;
overflow: hidden;
list-style: none;
}

.detail
{
    width: 85%;
    height: 100%;
    position: absolute;
    right: 0;
    top:0;
    background: white;
    color:black;
    opacity: 0;
    padding:30px;
    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: 70% !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: 20px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 4px;
    width: 40px;
    transform: rotate(180deg);
    font-weight: 400;
    cursor: pointer;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
  
}

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

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

</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>

cwilk180 · July 4, 2021

Thank You

WillMyers · July 10, 2021

hey @tuanphan, thanks for the recommendation. It's not possible invert mine, that would require a different HTML setup, but that's pretty cool and a good idea for a future plugin!

@cwilk180, if your end up getting my plugin and have any questions let me know!

cwilk180 · July 13, 2021

@WillMyers Thanks! I did get it! such a great plugin. Would love to style each tab different - is that possible?

tuanphan · July 14, 2021

On 7/13/2021 at 9:45 AM, cwilk180 said:

@WillMyers Thanks! I did get it! such a great plugin. Would love to style each tab different - is that possible?

I think this is possible with CSS.

Inscape · July 14, 2021

On 7/2/2021 at 3:21 AM, tuanphan said:

add a Code Block >> Paste this CodePen code

Thanks @tuanphan, I adapted this for a more complex usage and it looks really great! I tried at first to put the html in the code block, the css in Custom CSS, and the script in Code Injections, but it only worked if I put all three within the code block the way you have it here.

WillMyers · July 15, 2021

On 7/12/2021 at 10:45 PM, cwilk180 said:

@WillMyers Thanks! I did get it! such a great plugin. Would love to style each tab different - is that possible?

@cwilk180 Yup! @tuanphan is right, this can be styled through CSS.

Edited July 15, 2021 by WillMyers

LisaBennett · July 20, 2021

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)

On 7/2/2021 at 2:21 AM, tuanphan said:

<!-- Source: https://codepen.io/skkhan/pen/MWWdXbb -->
<!-- Tweak by @tuanphan -->

<ul class="main-box">
    <li class="box active"><span>Slide One</span>

        <div class="detail active">
			<p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
        </div>
    </li>
    <li class="box"><span>Slide Two</span>
        <div class="detail">
          <p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
        </div>
    </li>
    <li class="box"><span>Slide Three</span>

        <div class="detail">
              <p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
        </div>
    </li>
    <li class="box"><span>Slide Four</span>
    <div class="detail">
          <p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
    </div>
</li>

    <li class="box"><span>Slide Five</span>
        <div class="detail">
           <p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
        </div>
    </li>
</ul>

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


body 

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

.box
{

height: 322px;
padding:15px;
border-right: 1px solid white;
webkit-transition: 0.8s;
-o-transition: 0.8s;
transition: 0.8s;
position: relative;
overflow: hidden;
list-style: none;
}

.detail
{
    width: 85%;
    height: 100%;
    position: absolute;
    right: 0;
    top:0;
    background: white;
    color:black;
    opacity: 0;
    padding:30px;
    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: 70% !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: 20px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 4px;
    width: 40px;
    transform: rotate(180deg);
    font-weight: 400;
    cursor: pointer;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
  
}

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

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

</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>

tuanphan · July 22, 2021

On 7/21/2021 at 12:22 AM, 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)

Try contacting via mail on his site.

ievavi · July 25, 2021

On 7/2/2021 at 10:21 AM, tuanphan said:

Squarestylist has a course on this. $197. https://www.squarestylist.com/shop/vertical-tabs

or Will-Myers plugin ($10) https://www.will-myers.com/products/p/accordion-dropdown-plugin-for-squarespace

@WillMyers I wonder if it is possible to use CSS Flex to invert the bars from horizontal to vertical, to achieve the above effect?

Or you can also add a Code Block >> Paste this CodePen code

<!-- Source: https://codepen.io/skkhan/pen/MWWdXbb -->
<!-- Tweak by @tuanphan -->

<ul class="main-box">
    <li class="box active"><span>Slide One</span>

        <div class="detail active">
			<p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
        </div>
    </li>
    <li class="box"><span>Slide Two</span>
        <div class="detail">
          <p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
        </div>
    </li>
    <li class="box"><span>Slide Three</span>

        <div class="detail">
              <p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
        </div>
    </li>
    <li class="box"><span>Slide Four</span>
    <div class="detail">
          <p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
    </div>
</li>

    <li class="box"><span>Slide Five</span>
        <div class="detail">
           <p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
        </div>
    </li>
</ul>

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


body 

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

.box
{

height: 322px;
padding:15px;
border-right: 1px solid white;
webkit-transition: 0.8s;
-o-transition: 0.8s;
transition: 0.8s;
position: relative;
overflow: hidden;
list-style: none;
}

.detail
{
    width: 85%;
    height: 100%;
    position: absolute;
    right: 0;
    top:0;
    background: white;
    color:black;
    opacity: 0;
    padding:30px;
    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: 70% !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: 20px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 4px;
    width: 40px;
    transform: rotate(180deg);
    font-weight: 400;
    cursor: pointer;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
  
}

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

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

</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>

Any insights how this could be appropriated for mobile view (that would go horizontal instead of vertical?)

tuanphan · July 27, 2021

On 7/25/2021 at 6:08 PM, ievavi said:

Any insights how this could be appropriated for mobile view (that would go horizontal instead of vertical?)

Which code did you use?

ievavi · July 27, 2021

3 minutes ago, tuanphan said:

Which code did you use?

Hey, @tuanphan! I used the code from https://codepen.io/skkhan/pen/MWWdXbb

So the code below is:

<!-- Source: https://codepen.io/skkhan/pen/MWWdXbb -->
<!-- Tweak by @tuanphan -->

<ul class="main-box">
    <li class="box active"><span>Slide One</span>

        <div class="detail active">
			<p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
        </div>
    </li>
    <li class="box"><span>Slide Two</span>
        <div class="detail">
          <p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
        </div>
    </li>
    <li class="box"><span>Slide Three</span>

        <div class="detail">
              <p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
        </div>
    </li>
    <li class="box"><span>Slide Four</span>
    <div class="detail">
          <p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
    </div>
</li>

    <li class="box"><span>Slide Five</span>
        <div class="detail">
           <p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
        </div>
    </li>
</ul>

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


body 

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

.box
{

height: 322px;
padding:15px;
border-right: 1px solid white;
webkit-transition: 0.8s;
-o-transition: 0.8s;
transition: 0.8s;
position: relative;
overflow: hidden;
list-style: none;
}

.detail
{
    width: 85%;
    height: 100%;
    position: absolute;
    right: 0;
    top:0;
    background: white;
    color:black;
    opacity: 0;
    padding:30px;
    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: 70% !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: 20px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 4px;
    width: 40px;
    transform: rotate(180deg);
    font-weight: 400;
    cursor: pointer;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
  
}

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

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

</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>

HDS · January 24, 2022

@tuanphan I've used your code in a code block. Is there a way to make this work in mobile view, (maybe a 90 degree turn) ?

tuanphan · January 25, 2022

10 hours ago, HDS said:

@tuanphan I've used your code in a code block. Is there a way to make this work in mobile view, (maybe a 90 degree turn) ?

Can you share link to your site?

HDS · January 25, 2022

@tuanphan Please see script below. I need this to be mobile responsive. The tab heading are also not aligned centered even though the code says it would be.

<!-- Source: https://codepen.io/skkhan/pen/MWWdXbb -->
<!-- Tweak by @tuanphan -->

<ul class="main-box">
    <li class="box active"><span>Slide One</span>

        <div class="detail active">
			<p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
        </div>
    </li>
    <li class="box"><span>Slide Two</span>
        <div class="detail">
          <p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
        </div>
    </li>
    <li class="box"><span>Slide Three</span>

        <div class="detail">
              <p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
        </div>
    </li>
    <li class="box"><span>Slide Four</span>
    <div class="detail">
          <p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
    </div>
</li>

    <li class="box"><span>Slide Five</span>
        <div class="detail">
           <p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
        </div>
    </li>
</ul>

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


body 

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

.box
{

height: 322px;
padding:15px;
border-right: 1px solid white;
webkit-transition: 0.8s;
-o-transition: 0.8s;
transition: 0.8s;
position: relative;
overflow: hidden;
list-style: none;
}

.detail
{
    width: 85%;
    height: 100%;
    position: absolute;
    right: 0;
    top:0;
    background: white;
    color:black;
    opacity: 0;
    padding:30px;
    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: 70% !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: 20px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 4px;
    width: 40px;
    transform: rotate(180deg);
    font-weight: 400;
    cursor: pointer;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
  
}

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

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

</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>

moonlitdesign · January 25, 2022

Please could I have a normal mobile responsive for this, struggling!!

<ul class="main-box">
<li class="box active"><span>Discover</span>

<div class="detail active">
           <p> Each projects start with the discovery phase where we collect as much data as possible about your business, your brand and any visual inspiration. Through this research, we will craft two creative directions in the form of moodboards! </p>

</div>
</li>
<li class="box"><span>Develop</span>
<div class="detail">
<p> Based on your feedback, we then delve into the design phase of the project. Depending on your package, this would usually start with the choice of two brand concepts, of which we will develop the one you resonate with most for your full visual identity. Each project allows for a few rounds of amendments until we achieve the desired look. </p>

</div>
</li>
<li class="box"><span>Deliver</span>

<div class="detail">
<p> Once we’ve signed off all the designs, I will start packaging all of your files for you, available through your own client portal. For each element, you will be provided with multiple file types for all your web and print needs. You will also receive all relevant launch material to help you deliver your new branding.</p>

</div>
</li>

</ul>

body

.main-box
{
display: flex;
background: none;
margin: 70px auto 70px auto;
width:1000px;

}

.box
{

height: 400px;
padding:10px;
border-right: 1px solid black;
webkit-transition: 0.8s;
-o-transition: 0.8s;
transition: 0.8s;
position: relative;
overflow: hidden;
list-style: none;
background-color: #EAE6DE;

}

.detail
{
width: 85%;
height: 100%;
position: absolute;
right: 20px;
top:20px;
bottom: 0;
background: #EAE6DE;
color:black;
opacity: 0;
padding:120px;
marign: auto;
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: 100% !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: 30px;
font-family: meno-banner;
letter-spacing: 0px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #000;
width: 30px;
transform: rotate(180deg);
font-weight: 300;
cursor: pointer;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: 0 auto;
font-style: italic;

}

.box.active span
{
   left:30px;
   right:auto;
   margin:0;
font-weight:300;
color: #57432B;
background-color: #EAE6DE;
}

.box:hover:not(.box.active) span
{
background-color:#57432B;
color: #EAE6DE;
width: 100%;
height: 100%;
}

.box.active span
{cursor: default;}

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

</style>

var slidecal = 30/getslide+'%';

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

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

tuanphan · January 26, 2022

14 hours ago, moonlitdesign said:

Please could I have a normal mobile responsive for this, struggling!!

<ul class="main-box">
<li class="box active"><span>Discover</span>

<div class="detail active">
           <p> Each projects start with the discovery phase where we collect as much data as possible about your business, your brand and any visual inspiration. Through this research, we will craft two creative directions in the form of moodboards! </p>

</div>
</li>
<li class="box"><span>Develop</span>
<div class="detail">
<p> Based on your feedback, we then delve into the design phase of the project. Depending on your package, this would usually start with the choice of two brand concepts, of which we will develop the one you resonate with most for your full visual identity. Each project allows for a few rounds of amendments until we achieve the desired look. </p>

</div>
</li>
<li class="box"><span>Deliver</span>

<div class="detail">
<p> Once we’ve signed off all the designs, I will start packaging all of your files for you, available through your own client portal. For each element, you will be provided with multiple file types for all your web and print needs. You will also receive all relevant launch material to help you deliver your new branding.</p>

</div>
</li>



</ul>

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

body

.main-box
{
display: flex;
background: none;
margin: 70px auto 70px auto;
width:1000px;

}

.box
{

height: 400px;
padding:10px;
border-right: 1px solid black;
webkit-transition: 0.8s;
-o-transition: 0.8s;
transition: 0.8s;
position: relative;
overflow: hidden;
list-style: none;
background-color: #EAE6DE;


}


.detail
{
width: 85%;
height: 100%;
position: absolute;
right: 20px;
top:20px;
bottom: 0;
background: #EAE6DE;
color:black;
opacity: 0;
padding:120px;
marign: auto;
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: 100% !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: 30px;
font-family: meno-banner;
letter-spacing: 0px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #000;
width: 30px;
transform: rotate(180deg);
font-weight: 300;
cursor: pointer;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: 0 auto;
font-style: italic;

}

.box.active span
{
   left:30px;
   right:auto;
   margin:0;
font-weight:300;
color: #57432B;
background-color: #EAE6DE;
}

.box:hover:not(.box.active) span
{
background-color:#57432B;
color: #EAE6DE;
width: 100%;
height: 100%;
}

.box.active span
{cursor: default;}

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


</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>

What it should look like on mobile?

Sinmaster1701 · February 11, 2022

I cannot answer this question, but instead want to know if anyone can help with the coding of this already amazing code. I want to be able to have different colors for each tab. In the picture I have show I have 4 different tabs. How would I go about this please???

tuanphan · February 14, 2022

On 2/12/2022 at 6:19 AM, Sinmaster1701 said:

I cannot answer this question, but instead want to know if anyone can help with the coding of this already amazing code. I want to be able to have different colors for each tab. In the picture I have show I have 4 different tabs. How would I go about this please???

Try adding this to Code Block

<style>
  li.box:nth-child(1) {
  	background-color: red;
  }
  li.box:nth-child(2) {
  	background-color: green;
  }
  li.box:nth-child(3) {
  	background-color: violet;
  }
  li.box:nth-child(4) {
  	background-color: pink;
  }
</style>

DevonHarris · March 9, 2022

hi @tuanphan this code worked great!! Is there any way to make the image span the height of the tabs but only half the width, so the image floats left and the text floats right? Please see my link, I added a filler image for now, lmk if you know how to do this, thank you so much!! https://www.breakpointbranding.com/services

DevonHarris · March 9, 2022

@LisaBennett did you ever figure out how to add the images?

tuanphan · March 13, 2022

On 3/9/2022 at 10:45 AM, DevonHarris said:

hi @tuanphan this code worked great!! Is there any way to make the image span the height of the tabs but only half the width, so the image floats left and the text floats right? Please see my link, I added a filler image for now, lmk if you know how to do this, thank you so much!! https://www.breakpointbranding.com/services

Edit this code

<div class="detail active">
          <img src="https://static1.squarespace.com/static/5fd5fd7bc704802ff553283e/t/607efb61e262694be0d3d65f/1618934625616/CredibilityIcon.png" alt="discovery phase photo" width="25%">
			<h2>Meet &amp; Greet</h2>
			<p>Are we right for each other?  </p>
        </div>

to this

<div class="detail active">
          <img src="https://static1.squarespace.com/static/5fd5fd7bc704802ff553283e/t/607efb61e262694be0d3d65f/1618934625616/CredibilityIcon.png" alt="discovery phase photo" width="25%">
    <div class="detail_text">
			<h2>Meet &amp; Greet</h2>
			<p>Are we right for each other?  </p>
        </div></div>

Next, add this to Design > Custom CSS

/* vertical tab text image */
@media screen and (min-width:992px) {
div.detail img {float: left;}
div.detail .detail_text {
    float: left;
    margin-left: 20px;
}
div.detail .detail_text h2 {
    margin-top: -10px;
    margin-bottom: 0;
}}

DevonHarris · March 30, 2022

On 3/13/2022 at 7:03 AM, tuanphan said:

Edit this code

<div class="detail active">
          <img src="https://static1.squarespace.com/static/5fd5fd7bc704802ff553283e/t/607efb61e262694be0d3d65f/1618934625616/CredibilityIcon.png" alt="discovery phase photo" width="25%">
			<h2>Meet &amp; Greet</h2>
			<p>Are we right for each other?  </p>
        </div>

to this

<div class="detail active">
          <img src="https://static1.squarespace.com/static/5fd5fd7bc704802ff553283e/t/607efb61e262694be0d3d65f/1618934625616/CredibilityIcon.png" alt="discovery phase photo" width="25%">
    <div class="detail_text">
			<h2>Meet &amp; Greet</h2>
			<p>Are we right for each other?  </p>
        </div></div>

Next, add this to Design > Custom CSS

/* vertical tab text image */
@media screen and (min-width:992px) {
div.detail img {float: left;}
div.detail .detail_text {
    float: left;
    margin-left: 20px;
}
div.detail .detail_text h2 {
    margin-top: -10px;
    margin-bottom: 0;
}}

@tuanphan that worked, thank you so much!!!

Baileyk2011 · April 18, 2022

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!

Vertical side tabs 7.1

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

tuanphan

cwilk180

WillMyers

Posted Images

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources