Side tabbed content issues

Bridie · October 25, 2022

Hi all!

I'm using this code https://codepen.io/jhawes/pen/PPeBOp to create a tabbed content block to show my different services.

I've added the HTML and JS as code block and I've put the CSS into my Custom CSS. I've also put JQuery code into my header using Code Injection.

I've been having a good go at this for a few days but come across two things I can't seem to fix and wondering if anyone would kindly be able to help.

When I paste the unedited HTML in, the side navigation links didn't look like JHawes. Firstly they showed as bullet list, so I took away the 'li' tags and made them divs.
The side navigation was also not highlighted the way it is in JHawes code. Taking away the li tags did give the text a highlight but it is just around the word and not the full width of the side tab as it shows in his code. Anyone know how to do this?
I'm still in a Squarespace trial but when I preview the site the first link (Half day) seems to work as it jumps the page to the top of that section, however, when I click on the others 'full access' 'power hour' etc, they don't work.

So grateful to anyone that can advise.

https://squid-raccoon-pxc9.squarespace.com/ password: cr3ate

Edited October 26, 2022 by Bridie

tuanphan · October 27, 2022

Which exact code did you add? Have you added these yet?

and this

Bridie · October 27, 2022

Ah no, so I've completely bulldozed into this without knowing what I'm doing at all.

All I did was add these three codes.

Is it easiest if I start afresh if you're able to let me know what code to put where? Or I can share with you the code I've used so you could see what's missing? Whatever is easiest...

Thank you so so much!

Bridie

tuanphan · October 31, 2022

You can add all below code to Code Block, no need to add to Custom CSS or Code Injection

<div class="container">
	<div class="row">
   		<div class="col-sm-12">
   			<h2>Website &amp; Software Development</h2>
   			<div class="tab-container">
		      <ul class="nav nav-tabs nav-tabs-left nav-centered" role="tablist">
		        <li role="presentation" class="active">
		          <a href="#web-dev" data-toggle="tab" role="tab">
		            Website Development
		          </a>
		        </li>
		        <li role="presentation">
		          <a href="#graphic" data-toggle="tab" role="tab">
		            Graphic Design
		          </a>
		        </li>
		        <li role="presentation">
		          <a href="#marketing" data-toggle="tab" role="tab">
		            Online Marketing
		          </a>
		        </li>
		        <li role="presentation">
		          <a href="#business" data-toggle="tab" role="tab">
		            Business Solutions
		          </a>
		        </li>
		      </ul>
		      <div id="my_side_tabs" class="tab-content side-tabs side-tabs-left">
		        <div class="tab-pane fade in active" id="web-dev" role="tabpanel">
		        	<div class="col-sm-6">
		        		<h3>Custom Web Design</h3>
		        		<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
		        		<ul>
		        			<li>Responsive</li>
		        			<li>Search Engine Optimization (SEO)</li>
		        			<li>W3C Compliant</li>
		        			<li>Custom CMS</li>
		        			<li>Hosting</li>
		        			<li>Webmaster Services</li>
		        			<li>Content Writing</li>
		        		</ul>
		        	</div>
		        	<div class="col-sm-6">
		        		<h3>eCommerce</h3>
		        		<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
		        		<ul>
		        			<li>Shopify</li>
		        			<li>WordPress</li>
		        			<li>Paypal</li>
		        		</ul>
		        	</div>
		        	<div class="col-sm-6">
		        		
		        	</div>
		        </div>
		        <div class="tab-pane fade" id="graphic" role="tabpanel">
		        	<div class="col-sm-6">
		        		<h3>UI/UX Designs</h3>
		        		<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
		        		<ul>
		        			<li>Smartphone &amp; Tablet UI</li>
		        			<li>Responsive Website UI</li>
		        		</ul>
		        	</div>
		        	<div class="col-sm-6">
		        		<h3>Logos</h3>
		        		<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
		        	</div>
		        </div>
		        <div class="tab-pane fade" id="marketing" role="tabpanel">
					<div class="col-sm-6">
		        		<h3>Online Advertising</h3>
		        		<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
		        		<ul>
		        			<li>Facebook</li>
		        			<li>Google AdWords</li>
		        			<li>YouTube Ads</li>
		        			<li>Custom Ads</li>
		        		</ul>
		        	</div>
		        	<div class="col-sm-6">
		        		<h3>Social Media</h3>
		        		<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
		        		<ul>
		        			<li>Blogging</li>
		        			<li>Facebook</li>
		        			<li>Twitter</li>
		        			<li>LinkedIn</li>
		        			<li>Instagram</li>
		        			<li>Pinterest</li>
		        		</ul>
		        	</div>
		        	<div class="col-sm-6">
		        		<h3>Fundraising</h3>
		        		<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
		        	</div>
		        </div>
		        <div class="tab-pane fade" id="business" role="tabpanel">
		        	<div class="col-sm-6">
		        		<h3>Consulting</h3>
		        		<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
		        		<ul>
		        			<li>Company Branding</li>
		        			<li>Website Security</li>
		        			<li>Computer IT &amp; Repair</li>
		        			<li>Data Storage</li>
		        		</ul>
		        	</div>
		        	<div class="col-sm-6">
		        		<h3>Analytics &amp; Reporting</h3>
		        		<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
		        	</div>
		        </div>
		      </div>
		    </div>
		</div>
	</div>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
  <link rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85807/font-awesome.css"/>
  <style>
    .tab-container {
	background: #344152;
	padding: 0;
	border: solid 1px #444;
	height: 440px;
	overflow: hidden;
	width: 100%;
}
.nav-tabs.nav-tabs-left {
  float: left;
  border-right: 0;
}
.nav-tabs.nav-tabs-left li a {
  margin-right: 0;
	border-radius: 0;
  border-right: none;
}
.nav-tabs.nav-tabs-left {
  border-bottom: 0;
  max-width: 33%;
}
.nav-tabs.nav-tabs-left li {
  float: none;
  margin: 0;
	text-align: left;
}
.nav-tabs.nav-tabs-left li a,
.nav-tabs.nav-tabs-right li a {
  background-color: #344152;
  color: #fff;
}
.nav-tabs.nav-tabs-left li a:hover,
.nav-tabs.nav-tabs-right li a:hover {
  background-color: rgba(255,255,255,0.9);
  border-color: rgba(255,255,255,0.9);
  color: #444;
}
.nav-tabs.nav-tabs-left li.active a,
.nav-tabs.nav-tabs-right li.active a,
.nav-tabs.nav-tabs-left li.active .glyphicon,
.nav-tabs.nav-tabs-right li.active .glyphicon {
  color: #333;
}
.nav-tabs.nav-tabs-left li.active a:hover,
.nav-tabs.nav-tabs-right li.active a:hover,
.nav-tabs.nav-tabs-left li.active .glyphicon:hover,
.nav-tabs.nav-tabs-right li.active .glyphicon:hover {
  color: #444;
}
.nav-tabs.nav-tabs-left li.active a,
.nav-tabs.nav-tabs-right li.active a,
.nav-tabs.nav-tabs-left li.active a:hover,
.nav-tabs.nav-tabs-right li.active a:hover,
.nav-tabs.nav-tabs-left li.active a:focus,
.nav-tabs.nav-tabs-right li.active a:focus {
  background-color: #fff;
}
.nav-tabs.nav-tabs-left li:not(:last-of-type),
.nav-tabs.nav-tabs-right li:not(:last-of-type) {
  margin-bottom: -1px;
}
.tab-content {
	background: #fff;
	height: 440px;
	overflow-y: scroll;
}
.tab-content.side-tabs .tab-pane {
  display: none;
  padding: 20px;
  overflow-y: auto;
}
.tab-content.side-tabs-left {
  margin-left: 45px;
}
.tab-content.side-tabs-left .tab-pane {
  border-radius: 0;
}
.tab-content.side-tabs-left .tab-pane.active {
  display: block;
  background-color: #fff;
  border-color: #fff;
  color: #333;
  font-weight: 300;
  letter-spacing: 0.1em;
}
.tab-content.side-tabs-right {
  margin-right: 45px;
}
.tab-content.side-tabs-right .tab-pane {
  border-radius: 4px 0 0 4px;
}
main > .row:not(:first-of-type) {
  margin-top: 1.1em;
}
col.time,
col.repname {
  width: 12em;
}
col.did {
  width: 9em;
}
.nav-tabs>li>a,.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
	border: none;
}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="https://s.codepen.io/assets/libs/modernizr.js"></script>
  <script>
    (function () {
	'use strict';

	var sideTabsPaneHeight = function() {
		var navHeight = $('.nav-tabs.nav-tabs-left').outerHeight() || $('.nav-tabs.nav-tabs-right').outerHeight() || 0;

		var paneHeight = 0;

		$('.tab-content.side-tabs .tab-pane').each(function(idx) {
			paneHeight = $(this).outerHeight() > paneHeight ? $(this).outerHeight() : paneHeight;
		});

		$('.tab-content.side-tabs .tab-pane').each(function(idx) {
			$(this).css('min-height', navHeight + 'px');
		});
	};
	
  $(function() {
    sideTabsPaneHeight();

		$( window ).resize(function() {
			sideTabsPaneHeight();
		});

		$( '.nav-tabs.nav-tabs-left' ).resize(function() {
			sideTabsPaneHeight();
		});
	});
}());

  </script>

Bridie · November 1, 2022

Thanks so much for the code @tuanphan 🙏 - one thing, the width is overrunning the block size and actually overrunning my website. Previously I had the width as 100% and it stayed within the confines of however big I made the actual block, is there a way to have it function like this?

https://squid-raccoon-pxc9.squarespace.com/services

password: cr3ate

Bridie · November 2, 2022

Hi again, sorry I've also just realised that the links don't work - so the first one (Website Development) seems to jump the page to that link so that works but none of the others (Graphic Design etc) don't change the content 😞

tuanphan · November 4, 2022

Bootstrap code caused site width problem. Add this to Design > Custom CSS to override it

.container {
    width: 100% !important;
}

With other, I see all are fine. Did you solve?

Bridie · November 7, 2022

Hiya, thanks, that code has helped - the code now is confined to the block perimeter, however there is still some weird spacing issues with the page... it should look like this one which is a duplicate without the code block: https://squid-raccoon-pxc9.squarespace.com/prservices

And for me the tab links still do not work 🤔

All pages still password - cr3ate

tuanphan · November 10, 2022

On 11/7/2022 at 5:12 PM, Bridie said:

Hiya, thanks, that code has helped - the code now is confined to the block perimeter, however there is still some weird spacing issues with the page... it should look like this one which is a duplicate without the code block: https://squid-raccoon-pxc9.squarespace.com/prservices

And for me the tab links still do not work 🤔

All pages still password - cr3ate

Can you take some screenshots of spacing? We can fix easier

Bridie · May 20, 2023

Hello @tuanphan

Thank you so much for your help so far.

I'm finally returning to this and still want to correctly install it. I've worked out how to correctly add the code as well as the external stylesheets/pens that I'd missed before.

However I still have the spacing issue I mentioned previously. I have identified the problem but I don't know how to fix it.

In the Pen Settings under CSS, there is a bootstrap link to be added:

Without adding it, the navigation on the left appears as bullet points (incorrect) - see screenshot below. But the code in every other way works fine.

When I do add it, my whole webpage seems zoomed out...

It affects the whole rest of the webpage too, see examples here:

Can you suggest a way to fix this? I'd be so grateful!!

Many thanks

Bridie

https://www.whyyoucreate.com/expert-session - this is the page

Edited May 20, 2023 by Bridie

tuanphan · May 22, 2023

On 5/21/2023 at 3:20 AM, Bridie said:

Hello @tuanphan

Thank you so much for your help so far.

I'm finally returning to this and still want to correctly install it. I've worked out how to correctly add the code as well as the external stylesheets/pens that I'd missed before.

However I still have the spacing issue I mentioned previously. I have identified the problem but I don't know how to fix it.

In the Pen Settings under CSS, there is a bootstrap link to be added:

Without adding it, the navigation on the left appears as bullet points (incorrect) - see screenshot below. But the code in every other way works fine.

When I do add it, my whole webpage seems zoomed out...

It affects the whole rest of the webpage too, see examples here:

Can you suggest a way to fix this? I'd be so grateful!!

Many thanks

Bridie

https://www.whyyoucreate.com/expert-session - this is the page

You can consider finding another code

Or add Bootstrap then try finding code to override Boostrap code

Side tabbed content issues

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

tuanphan

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

Create an account or sign in to comment

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources