WordPress.org

Ready to get started?Download WordPress

Forums

WP UI - Tabs, Accordions, Sliders
Link between tabs on WP UI (12 posts)

  1. jeemer
    Member
    Posted 2 years ago #

    Is there any way to link from one tab to another? For example, we have a product overview in the first tab, and a form to enquire about purchase in the last tab. We'd like to put an image in the first tab that takes the user to the last tab on clicking it. Anchors don't seem to work.

    Thanks :)

    http://wordpress.org/extend/plugins/wp-ui/

  2. sickhippie
    Member
    Posted 2 years ago #

    If you have 3 tabs - tab1, tab2, tab3 - from tab one you should be able to link with href="#tab3" or href="mysite.com/pagepath/#tab3".

  3. digify
    Member
    Posted 2 years ago #

    That doesn't seem to work on links, just opens the first tab.

  4. jeemer
    Member
    Posted 2 years ago #

    Ok - you can link to a tab but it requires an underscore, ie #_tab3

    The problem is that if someone clicks the link in tab 1, is sent to the last tab, then returns to the first tab the link is no longer valid. This is because the url now includes the anchor tag at the end, and therefore thinks it's already there.

    What I'm looking for is the code to simulate the tab itself being clicked, so that I can apply it to a link and it can be clicked repeatedly by the user if required, without reloading the page :/

  5. verbrandvet
    Member
    Posted 1 year ago #

    ok, nice jeemer.
    The underscore isnt neccesary though.

    Lets say i have 7 tabs, but i want to show only 5 tabs. Users can acces tab 6 and 7 by clicking an image in tab 5. Is it possible to make tab6 and tab7 invisible from the tab-bar?

  6. capson
    Member
    Posted 1 year ago #

    I think this will require jquery; this might help:
    http://stackoverflow.com/questions/2053598/jquery-click-doesnt-work-on-hyperlink

    If you figure this out Please post back I would like to know how to do this.

  7. capson
    Member
    Posted 1 year ago #

  8. capson
    Member
    Posted 1 year ago #

    try this as place to start

    <script type="text/javascript">
      $(function() {
    
    if ($("#lnk_0")[0].click)
        $("#lnk_0")[0].click();
    else
        window.location = $("#lnk_0").attr('href');
    </script>
    <a id="lnk_0" href="http://mydomain.com/mypage.html">link</a>
  9. capson
    Member
    Posted 1 year ago #

    This is almost there:
    Place in customfunctions.php:

    //--Current Page URL
    function curPageURL() {
     $pageURL = 'http';
     if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
     $pageURL .= "://";
     if ($_SERVER["SERVER_PORT"] != "80") {
      $pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
     } else {
      $pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
     }
     return $pageURL;
    }

    Place your tab shortcode in a php widget in a wigitized sidebar
    Then in, say, tab3 where you want to go back to tab1:

    [wptabtitle] tab3[/wptabtitle[wptabcontent]
    <a id="lnk_0" href="<?php echo curPageURL();?>/#_tab1">link</a>
    [/wptabcontent]
    
    <script type="text/javascript">
      $(function() {
    if ($("#lnk_0")[0].click)
        $("#lnk_0")[0].click();
    else
        window.location = $("#lnk_0").attr('href');
    </script>

    This worked for me, but the page reloads, so the sweet ajax effect is lost.

  10. verbrandvet
    Member
    Posted 1 year ago #

    customfunctions.php? I'm sorry but i can not find it..

    any other place where i can put it? or do i need to make customfunctions.php myself??

    yet another question.. how can i change the text and/or lay-out of the tab-bottom prev and next buttons?

  11. kavingray
    Member
    Plugin Author

    Posted 1 year ago #

  12. m zamin
    Member
    Posted 1 year ago #

    Hi,
    Is there a way to expand all accordion tab on single button click?

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.