Jump to content

Vertical side tabs 7.1

Recommended Posts

Posted

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>

 

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!)

Posted

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!

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

Posted
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.

Posted (edited)
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 by WillMyers

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

Posted

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>

 

 

vertical tab image.jpeg

Posted
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)

 

vertical tab image.jpeg

Try contacting via mail on his site.

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!)

Posted
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?)

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

 

  • 5 months later...
Posted

@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>
Posted

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>

Posted
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?

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!)

  • 3 weeks later...
Posted

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

website.png

Posted
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???

website.png

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>

 

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!)

  • 4 weeks later...
Posted
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;
}}

 

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!)

  • 3 weeks later...
Posted
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!!!   

  • 3 weeks later...
Posted

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

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.