Show first tab/pane's content on load

[keneso]

Hi

Here
ttri dot biz/test_sidebar/
I am trying to show/display the content of the first tab/link

I added a class to the first “pane”, and then this script

<script>
$(document).ready(function() {
    $('.fz-show').show();
});
</script>

when launching the file on local it dispays the first content, and when clicking on the other tabs it displays that specific tab’s content plus the first one, and on the “live” test it shows all of the five panes’ content.

Basically I would like to have the first tab’s content to display on page load, but changed to the other content based on the tab selection.

Thank you

[PaulOB]

HI,

You could add a clsss to the first tab by default so that the item shows and then remve it when clicked.

e.g.

$(".fz-intro-link a").click(function() {
$(".fz-intro-link a").removeClass('current-link');
$(".firstTab").removeClass('firstTab');
$(this).addClass('current-link');

Html:

<div id="item-1" class="firstTab">
<h1>test 1</h1>

and.

<div class="fz-intro-link"> <a class="current-link link-01" href="#item-1"`>

CSS:

.fz-content > div {display:none}
.fz-content > div:target {display: block}
.fz-content > div.firstTab{display:block}

I would be inclined to use JS to hide and show those elements rather than use the :target pseudo class or perhaps the checkbox hack is more solid and usable.

[keneso]

Thank you.

There is a little issue with this: first load of page works fine, but is you are on another tab than the first it shows both tabs’ content (local testing, I will load to see it live in few minutes).

About the checkbox hack, is my understanding correct that you could achieve this (my case) only thru css, and no js?
'Cause that was basically my first intention.

I am happy with the solution, but if you care to share why you prefer js I’d be interested to know an expert’s take on this, like said in the former threas the :target piece was taken from w3, reason for which I thought it was a reliable road.

Thanks again.

EDIT
Confirming about the issue on page reload (live test).

[PaulOB]

@keneso

There is a little issue with this: first load of page works fine, but is you are on another tab than the first it shows both tabs’ content (local testing, I will load to see it live in few minutes

You are probably clicking refresh after you have navigated to an item and the fragment identifier is therefore appended to the url so when you click refresh you are saying load the page but go to the link I just clicked. If you type in the url directly or remove the fragment identifier from the url then only the first link will load.

This is the problem with the :target selector and why I suggested that a jquery hide and show is more easily manageable.

The check box selector would work better but will need the same sort of structure as the original demo where the link is adjacent to its content in the html.

To fix the problem we can remove that current-link class and instead get the js to click the first item automatically.

Thge js would be changed to this from before.

<script>
$('#link1')[0].click()
$(".fz-intro-link a").click(function() {
	$(".firstTab").removeClass('firstTab');
});
</script>

I just added #link1 to the first item.

<div class="sidebar-links">
<div class="fz-intro-link"> <a id="link1" class=" link-01" href="#item-1">

The js will now click the first link which when the page loads and replicate the action of having clicked the first link. This means that you don’t need to add a special class as it wil work with the usual routine.

[keneso]

Thank you.

It’s working as expected.
In the meantime I am experimenting with the checkbox hack, like you noted the challenge is to get the same look with different structure.

EDIT
For future reference I added current-link snip for the highlighted tab

<script>
$('#fz-first-link')[0].click()
$(".fz-intro-link a").click(function() {
    $(".fz-intro-link a").removeClass('fz-current-link');
    $(".fz-first-tab").removeClass('fz-first-tab');
    $(this).addClass('fz-current-link');
});
</script>