Tabbed Panel

[philips]

Hello guys,

I am trying the create a functioning tabbed panel for my blog. So far, I was able to do the HTML and CSS part. However the tabs don't work i.e. they are not clickable. Any advice will be greatly appreciated. Thank you.

[bernie1227]

Could we possibly see your code? If you want to just hijack some javascrit for it, here is a list of some good tabs:
http://speckyboy.com/2010/09/08/30-c...abs-solutions/

[philips]

Hi friend,

Many thanks for your reply. Please find attached the HTML code.
What would you recommend?







PS. I have read that CSS3 is not fully supported.

[philips]

The tabbed panel would look like the attached picture. The HTML code I attached gives this result except that the tabs are not clickable

[bernie1227]

Ok, so what you want to do, is use this code: (I've used jquery for a nice little fade effect.:
So depending on the name of each tab and piece of content, put:

$("#div-one").click(function(){
    $("#content-two").fadeOut(500);
    $("#content-one").fadeIn(500);
});
    
    
$("#div-two").click(function(){
    $("#content-one").fadeOut(500);
    $("#content-two").fadeIn(500);
});

In the JavaScript. In this, #div-one and #div-two should be the id's of the tabs, and content-one content-two should be the id's of the content, the one with the fade in command has to be the one you want to appear when you click the tab. You can add this more times for as many tabs as you like.
Remember to reference the jquery library in the head:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

[philips]

Lovely idea with the fade in effect... Thank you so much... please forgive my clumsiness if I ask you where I need to place this code as I am new to JQuery and JavaScripting... but I am learning a lot.... I know of course where to place the HTML code

[bernie1227]

That's perfectly fine, you will need to place the jquery inside:

<script type="text/javascript">
// code
</script>

Tags in the head of the page. The reference to the jquery library also has to go in the head. Also, don't forget to change the names of the divs referenced in the code appropriately to your HTML.

[philips]

Thank you so much. I'll work on it and will revert back to you.

[philips]

Working on it.

[philips]

Ok, I added the codes inside the head tag.
I am trying to make the code reference to the HTML and I'm having difficulty. Here is what I've done so far, and it is not working

<script type="text/javascript">
$("#tabs").click(function(){
    $("#tab-pop").fadeOut(500);
    $("#tab-latest").fadeIn(500);
});
    
    
$("#tabs").click(function(){
    $("#tab.comm").fadeOut(500);
    $("#tab-tags").fadeIn(500);
});

</script>

Will be grateful for your help