Trouble with Tabbed Tables

clemie
New Member

Posts: 123

Trouble with Tabbed Tables Jun 26, 2018 17:08:35 GMT -8

Post by clemie on Jun 26, 2018 17:08:35 GMT -8

I've started from making a tabbed table from scratch with the help of a coding site for beginners however i've hit a road block and would greatly appreciate help. I'll start off with just saying my knowledge on coding if very low and anything i do know i am self taught.

This si the coding I have down so far.


<div class="tabbed-box">

	<ul class="tabs">

		<li><a href="#">Tab #1</a></li>

		<li><a href="#">Tab #2</a></li>

		<li><a href="#">Tab #3</a></li>

        <li><a href="#">Tab #4</a></li>

	</ul>

	<div class="tabbed-content">

		<p>Here's my content for tab 1</p>

	</div>

	<div class="tabbed-content">

		<p>Here's my content for tab 2</p>

	</div>

	<div class="tabbed-content">

		<p>Here's my content for tab 3</p>

	</div>

</div>


/*Tabbed HP*/

.tabbed-box {

	width: 632px;

	background: #fff url(tabbed-body-bg.jpg) repeat-x bottom;

	border: 1px solid #ddd; }



.tabbed-box .tabs li {

	list-style: none;

	float: left; }

.tabbed-box .tabs li a {

	display: block;

	width: 150px;

	padding: 5px 0;

	font-weight: bold;

	text-align: center;

	text-decoration: none;

	color: #888;

	background: #fff url(tabbed-tab-bg.jpg) repeat-x bottom; 

	border-left: 1px solid #ddd;

	border-bottom: 1px solid #ddd;}

.tabbed-box .tabs li:first-child a {

	border-left: none; }



.tabbed-box .tabs li a:hover {

	color: #333; }

.tabbed-box .tabs li a:focus {

	outline: none; }

.tabbed-box .tabs li a.active {

	background: #fff;

	color: #333;

	border-bottom: 1px solid #fff; }



.tabbed-content {

	padding: 3em 1em 1em 1em;

	display: none; }

I will be adding images to these. The roadblock I hit was when you click on a tab it doesnt switch tabs. It also doesnt show the content, I don't want the content to be hidden in the tabs i just want it to show the new ones as you click on each tab.

Thank you.

thewildside.boards.net/

elli Senior Member Posts: 1,822 elli inherit 96289 0 May 17, 2020 9:37:00 GMT -8 elli 1,822 Senior Member January 2007 ebbymac	Trouble with Tabbed Tables Jun 27, 2018 16:04:48 GMT -8 Select Post Deselect Post Link to Post Member Give Gift Back to Top Post by elli on Jun 27, 2018 16:04:48 GMT -8 Where is your JavaScript for the tabbing behavior?
	After over 17 years, I've decided to move on from ProBoards. If you need to contact me, find me on my website.

clemie
New Member

Posts: 123

Trouble with Tabbed Tables Jun 28, 2018 3:59:14 GMT -8

Post by clemie on Jun 28, 2018 3:59:14 GMT -8


var currentTab = 0; 

function openTab(clickedTab) {
	var thisTab = $(".tabbed-box .tabs a").index(clickedTab);
	$(".tabbed-box .tabs li a").removeClass("active");
	$(".tabbed-box .tabs li a:eq("+thisTab+")").addClass("active");
	$(".tabbed-box .tabbed-content").hide();
	$(".tabbed-box .tabbed-content:eq("+thisTab+")").show();
	currentTab = thisTab;
}

$(document).ready(function() {

	$(".tabs li:eq(0) a").css("border-left", "none");

	

	$(".tabbed-box .tabs li a").click(function() { 

		openTab($(this)); return false; 

	});

	

	$(".tabbed-box .tabs li a:eq("+currentTab+")").click()

});

But I currently don't have this anywhere because im not sure where to put it and when i put it in HTML it didn't change the effect of the table

Last Edit: Jun 28, 2018 4:08:54 GMT -8 by clemie

elli
Senior Member

Posts: 1,822

Trouble with Tabbed Tables Jun 28, 2018 8:13:22 GMT -8

Post by elli on Jun 28, 2018 8:13:22 GMT -8

You need to wrap it in a <script> tag, and place it either in your Forum Wrapper layout template in the <head> or closing </body> tag, or in your Global Headers/Footers.

<script>
var currentTab = 0; 

function openTab(clickedTab) {
  var thisTab = $(".tabbed-box .tabs a").index(clickedTab);
  $(".tabbed-box .tabs li a").removeClass("active");
  $(".tabbed-box .tabs li a:eq("+thisTab+")").addClass("active");
  $(".tabbed-box .tabbed-content").hide();
  $(".tabbed-box .tabbed-content:eq("+thisTab+")").show();
  currentTab = thisTab;
}

$(document).ready(function() {
  $(".tabs li:eq(0) a").css("border-left", "none");

  $(".tabbed-box .tabs li a").click(function() { 
    openTab($(this));
    return false; 
  });

  $(".tabbed-box .tabs li a:eq("+currentTab+")").click()
});
</script>

After over 17 years, I've decided to move on from ProBoards. If you need to contact me, find me on my website.

clemie New Member Posts: 123 clemie inherit Female 208780 0 Jan 13, 2024 6:02:20 GMT -8 clemie 123 New Member May 2014 clemie	Trouble with Tabbed Tables Jun 29, 2018 14:23:31 GMT -8 elli likes this Select Post Deselect Post Link to Post Member Give Gift Back to Top Post by clemie on Jun 29, 2018 14:23:31 GMT -8 Oh thank you very much that worked perfectly. I appreciate the help ^_^

Post by clemie on Jun 26, 2018 17:08:35 GMT -8

Post by elli on Jun 27, 2018 16:04:48 GMT -8

Post by clemie on Jun 28, 2018 3:59:14 GMT -8

Post by elli on Jun 28, 2018 8:13:22 GMT -8

Post by clemie on Jun 29, 2018 14:23:31 GMT -8