Results 1 to 5 of 5

Thread: JQuery UI tabs not hiding/clearing content when active tab is changed

  1. #1
    Join Date
    Dec 2013

    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:

      <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
      <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
      <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
      <link rel="stylesheet" href="/resources/demos/style.css">
      $(function() {
        $( "#tabs" ).tabs();
    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.

    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.

    My Page
    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!

  2. #2
    Join Date
    May 2006
    Somewhere behind your screen
    $("#tabs") refers to the element having its id attribute 'tabs' but there is no such element in your page source
    signature under construction

  3. #3
    Join Date
    Mar 2007
    If your asking -> http://www.webdeveloper.com/forum/fo...ch-as-JScript) in this forum please.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  4. #4
    Join Date
    Dec 2013
    Quote Originally Posted by Padonak View Post
    $("#tabs") refers to the element having its id attribute 'tabs' but there is no such element in your page source
    Thanks for the reply. I think I understood what you mean, but just in case I tried a few different things:

    -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?
    For example:
    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.

  5. #5
    Join Date
    Dec 2013
    For the time being, I've fixed the page so it "looks" right, even though it doesn't really function.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center



X vBulletin 4.2.2 Debug Information

  • Page Generation 0.13781 seconds
  • Memory Usage 2,890KB
  • Queries Executed 15 (?)
More Information
Template Usage (34):
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (1)bbcode_code
  • (1)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (5)memberaction_dropdown
  • (1)navbar
  • (5)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (5)postbit
  • (5)postbit_onlinestatus
  • (5)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (72):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates