Jump to content

Side tabbed content issues

Recommended Posts

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 by Bridie
Link to comment

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.image.thumb.png.4871cf52c536f6ec9899eaacd2108f3e.png

 

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

Link to comment

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>

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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.