JQuery UI tabs not hiding/clearing content when active tab is changed
New to this web developer thing, and I'm looking for some help. I'm re-designing my portfolio website and instead of using a bunch of different static pages, I'm looking to use a tabbed set up to switch between content areas. I want to use the JQuery UI tabs function to do this. I want to click on a heading, and have the content in that tab active, while the other content is hidden until you click on the next tab. Below is the script I'm using:
The problem I am having is that, when I click the different headings in the tabbed menu at the top of my page, the content doesn't change, nor does it hide any of the other tabbed content. It's all there, all the time.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
$( "#tabs" ).tabs();
JQuery UI Site
Notice how, when you click the different tabs, it hides the content from the non-active ones. That is my desired end result.
Notice how all the content is there as soon as the page loads. The tabs I am referring to are the horizontal ones underneath the header image.
I haven't altered the source code any other than the "Styles.CSS" to pass in my style sheet. I've gone through my HTML a few times to see if I'm missing things. I've cleaned it up and both the HTML and the CSS does pass W3c Validation. Not sure where to go from here. Thanks in advance!
$("#tabs") refers to the element having its id attribute 'tabs' but there is no such element in your page source
Please remember to wrap any code you have in forum tags:-
[CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]
If you can't think outside the box, you will be trapped forever with no escape...
Thanks for the reply. I think I understood what you mean, but just in case I tried a few different things:
Originally Posted by Padonak
-Changed the element from "tab" to "tabs" in the page source- It didn't solve the content issue and also "broke" the CSS
-Changed the CSS name element to a few different things to pass in that style from the CSS- content did not hide, and the CSS elements did not take.
-Commented out the offending "tab" section in the CSS that seems to be breaking the tab function- content still not hidden.
IS there something I'm missing, about passing a CSS class onto an element in the page?
If i want the CSS properties to apply to the element <div id="tabs">, so i create a <div id="MenuItem"> in the page source before the "tabs" div to call in the "MenuItem" class, will one break the other?
Is there an easier way to pass class elements from an external CSS sheet into a page element?
Regardless, I've changed the names around and compared it to the source code and it's still not hiding the content.
For the time being, I've fixed the page so it "looks" right, even though it doesn't really function.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)