Trying so hard to Link to tabbed content from an external link

Question

Terribly frustrated and embarrassed that I can't figure this out. Client wants a sitemap at the bottom of the website that takes the user to any page and any tab within that page with a single click. Should be easy enough to do, but for some reason, I can't wrap my brain around it. In the effort of complete honesty, I am an artist, with just enough code knowledge to be dangerous. I can't write JQuery on my own, but I am able to read through already written things and understand what is going on, for the most part.

1. Example 1- Contact.php Possesses basic functionality

2. Example 2- TabTest1.html I was able to take the information from stackoverflow's .com questions 10616833/link-to-anchor-inside-tabbed-content-from-an-external-link and get it to work. The script there actually doesn't work (for me). Took me a day, but I figured out what it was (brackets, as usual) and what you see is that information at work. Unfortunately, it doesn't just plug into my already existing code. I've tried a couple of different ways, but I don't completely understand what is going on in the jsfiddle.

3. Example 2- ContactRE.php This is my best attempt to work with the code given in the above question. I just feel overwhelmed. You can click on the tabs and see what it is doing, but after a click on any tab, they all light up as selected, but the content doesn't change at all. I have a suspicion it has something to do with the "//return false;" before the "if" statement, because un-commenting it makes it all work again, but still cannot link to the individual tab from the outside. When it is on, it seems like the ContactRE.php#Social does link, but only after typing it in, hitting enter, waiting and then hitting refresh.

4. Example 4- index.php You can see it is similar to Example 1, simply a different page to test the linking. It doesn't work. The tab content just disappears.

For both Example 1, 2 and 4 you can see I tried to figure this out on my own before even hitting the forums in the "BottomInfo" class, where the sitemap will be located. Links3 is the one I started with when I realized the system I thought would work, in Links2 and Links1 wasn't going to cut it. I simply took the links that constitute the tabs, removed styling through CSS and made the list. Works for it's respective page, but not to link externally.

I've created a JSFiddle, for those that prefer it. I am not very good at understanding a "hey, just add this and suddenly- magic!" followed by snippets of code, unless they come with great explanations. Maybe one day, just not yet. http://jsfiddle.net/ANCannan/CfGHp/

Below is my working JS, but I cannot use a hash in the URL to link to the tabs externally

    <script type= "text/javascript"> 
   $(document).ready(function(){
  //  When user clicks on tab, this code will be executed
   $("#tabs li").click(function() {
  //  First remove class "active" from currently active tab
   $("#tabs li").removeClass('active');

  //  Now add class "active" to the selected/clicked tab
   $(this).addClass("active");

  //  Hide all tab content
   $(".tab_content").hide();

  //  Here we get the href value of the selected tab
   var selected_tab = $(this).find("a").attr("href");

  //  Show the selected tab content
   $(selected_tab).fadeIn();

  //  At the end, we add return false so that the click on the link is not executed
     return false;

  });});
  </script>  

This is my Frankenstein JS attempt at making the tabs link-able by a hash in URL

       <script type= "text/javascript"> 
       $(document).ready(function(){
      //  When user clicks on tab, this code will be executed
       $("#tabs li").click(function() {
      //  First remove class "active" from currently active tab
       $("#tabs li").removeClass('active');

      //  Now add class "active" to the selected/clicked tab
       $(this).addClass("active");

     //  Hide all tab content
       $(".tab_content").hide();

    //  Here we get the href value of the selected tab
     var selected_tab = $(this).find("a").attr("href");

    //  Show the selected tab content
    $(selected_tab).fadeIn();

    //  At the end, we add return false so that the click on the link is not executed
     return false;
    });
if (window.location.hash !== '') {
    var $targetAnchor = $(document.location.hash);
    // Grab the ID of the .tab-content that the hash is referring to
    tabId = $targetAnchor.closest('.tab_content').attr('id');

    // Find the anchor element to "click", and click it
    $("#tabs li").find('a[href=#' + tabId + ']').click();

    $('html, body').animate({
        scrollTop: $targetAnchor.offset().top
    });
    }


   $('a').not('.tabs li a').on('click', function(evt) {
     evt.preventDefault();
     var whereTo = $(this).attr('goto');
    $tabs = $("ul.tabs li");
    $tabs.find('a[href=#' + whereTo + ']').trigger('click');
      alert(attr('name'));
     alert( $('#'+whereTo+' a').offset().top );
    $('html, body').animate({
      scrollTop: $('#'+whereTo+' a').offset().top
   });

 });

 $(function() {
     $('a.refresh').live("click", function() {
     location.reload();
   });
   });});
    </script> 

This is my abbreviated HTML

<div class= "Centered" id="TextContent">
    <div id="tabs_container">
      <ul id="tabs">
      <li>
        <div class= "Centered" id="TextContent2">
          <div id="tabs_container2">
            <ul id="tabs2">
              <li class="active">
                <div class= "LinkText" id="TT1"> <a class="icon_accept" href="#Before">Before</a></div>
              </li>
              <li>
                <div class= "LinkText" id="TT2"> <a class="icon_accept" href="#During">During</a></div>
              </li>
              <li>
                <div class= "LinkText" id="TT3"> <a class="icon_accept" href="#After">After</a></div>
              </li>
            </ul><!---Ends ul id "tabs" container2-->
          </div><!---Ends "tabs_container2"-->
        </div><!---Ends "Centered Text Content2"-->
        </li>
       </ul><!---Ends ul id "tabs-->
     </div><!---Ends "tabs-container"-->

    <div id="tabs_content_container">
        <div id="Before" class="tab_content" style="display: block;">
         <img src="Images/before.png" class="alignLeft" alt="CMC and QA Icons"><p>Sed do eiusmod tempor incididunt consectetur adipisicing elit,   duis aute irure dolor. In reprehenderit in voluptate quis nostrud   exercitation eu fugiat nulla pariatur. Ullamco laboris nisi qui officia   deserunt lorem ipsum dolor sit amet. In reprehenderit in voluptate   cupidatat non proident, sed do eiusmod tempor incididunt.</p>
        <p>Ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur   adipisicing elit, in reprehenderit in voluptate ut enim ad minim veniam.   Lorem ipsum dolor sit amet, quis nostrud exercitation velit esse cillum   dolore. In reprehenderit in voluptate excepteur sint occaecat eu fugiat   nulla pariatur.</p><p>Sed do eiusmod tempor incididunt consectetur adipisicing elit,   duis aute irure dolor. In reprehenderit in voluptate quis nostrud   exercitation eu fugiat nulla pariatur. Ullamco laboris nisi qui officia   deserunt lorem ipsum dolor sit amet. In reprehenderit in voluptate   cupidatat non proident, sed do eiusmod tempor incididunt.</p>
        <p>Ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur   adipisicing elit, in reprehenderit in voluptate ut enim ad minim veniam.   Lorem ipsum dolor sit amet, quis nostrud exercitation velit esse cillum   dolore. In reprehenderit in voluptate excepteur sint occaecat eu fugiat   nulla pariatur.</p>
           </div><!---Ends Before container-->

             <div id="During" class="tab_content" style="display: block;">   
          <p>In reprehenderit in voluptate   cupidatat non proident, sed do eiusmod tempor incididunt.</p>
           <p>Ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur   adipisicing elit, in reprehenderit in voluptate ut enim ad minim veniam.   Lorem ipsum dolor sit amet, quis nostrud exercitation velit esse cillum   dolore. In reprehenderit in voluptate excepteur sint occaecat eu fugiat   nulla pariatur.</p>
           <p>Sed do eiusmod tempor incididunt consectetur adipisicing elit,   duis aute irure dolor. In reprehenderit in voluptate quis nostrud   exercitation eu fugiat nulla pariatur. Ullamco laboris nisi qui officia   deserunt lorem ipsum dolor sit amet. In reprehenderit in voluptate   cupidatat non proident, sed do eiusmod tempor incididunt.</p>
           <p>Ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur   adipisicing elit, in reprehenderit in voluptate ut enim ad minim veniam.   Lorem ipsum dolor sit amet, quis nostrud exercitation velit esse cillum   dolore. In reprehenderit in voluptate excepteur sint occaecat eu fugiat   nulla pariatur. 

       </div><!---Ends "During"-->

           <div id="After" class="tab_content">
             <img src="Images/after.png" class="alignRight" alt="CMC and QA Icons">

         <p> <p>Sed do eiusmod tempor incididunt consectetur adipisicing elit,   duis aute irure dolor. In reprehenderit in voluptate quis nostrud   exercitation eu fugiat nulla pariatur. Ullamco laboris nisi qui officia   deserunt lorem ipsum dolor sit amet. In reprehenderit in voluptate   cupidatat non proident, sed do eiusmod tempor incididunt.</p>
       <p>Ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur   adipisicing elit, in reprehenderit in voluptate ut enim ad minim veniam.   Lorem ipsum dolor sit amet, quis nostrud exercitation velit esse cillum   dolore. In reprehenderit in voluptate excepteur sint occaecat eu fugiat   nulla pariatur.</p>
      <p>Sed do eiusmod tempor incididunt consectetur adipisicing elit,   duis aute irure dolor. In reprehenderit in voluptate quis nostrud   exercitation eu fugiat nulla pariatur. Ullamco laboris nisi qui officia   deserunt lorem ipsum dolor sit amet. In reprehenderit in voluptate   cupidatat non proident, sed do eiusmod tempor incididunt.</p>
       <p>Ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur   adipisicing elit, in reprehenderit in voluptate ut enim ad minim veniam.   Lorem ipsum dolor sit amet, quis nostrud exercitation velit esse cillum   dolore. In reprehenderit in voluptate excepteur sint occaecat eu fugiat   nulla pariatur.</p>
                    </div><!---Ends "After"-->

I've read through the following and tried to implement in various ways, though none worked. I've even tried to apply some of the accordion thought structure, since people seem to ask the same question about accordions, but I am not good at applying it to the tabs.

related Questions on stackoverflow

• link-to-an-anchor-within-jquery-tabbed-content
• unable-to-call-specific-content-from-an-external-file-inside-jquery
• use-one-jquery-code-for-all-tabs
• how-to-link-directly-to-jquery-accordion-tab
• link-to-open-jquery-accordion
• jquery-tabs-link-to-another-tab-from-inside

JQuery's topic/link-to-tab-from-outside-tabs-div

---

Sorry for the lack of links, apparently I can only post 2.

MAJOR UPDATE Oct 19 1PM ET I've not completely solved my problem, yet, but I can now link to a specific URL from outside the website (or type it in), however, if I am on the page the URL updates when I click on the link within the page or type it in manually, but it does not change the content until one clicks "refresh." The page is http://certus.worldpath.net/crazy.html Link directly to a tab by adding "#Email" to the end. Thoughts?

I will greatly appreciate any help you can give me.

Answer 1

A demo that uses jquery.tools for the tabs

As far as i understood your question this should match your problem:

• Tab B-1
• Tab B-3

The solution with your code to your original question

• How to Link to tabbed content from an external link?
• solved

Please take a look at the solution (#During, #After)

    if (window.location.hash) {
        var wndHash = window.location.hash;
        var tab = wndHash + "Tab";
        // if hash exist on doc ready then remove class "active" from all tabs        
        $("#tabs li").removeClass('active');
        // show the tab content and make tab list item (li) active
        $(wndHash).fadeIn();            
        $(tab).parent().addClass("active");
        console.log(wndHash, $(wndHash), tab, $(tab));
    } else {
        // if no hash make the BeforeTab active
        $("#Before").fadeIn();            
        $("#BeforeTab").parent().addClass("active");
    }

Excursion using CSS3 selectors

Based on Naman Goel suggestion (see in this thread) i have set up a basic css3 target selector demo:

 <h2>Table of contents</h2>
 <ul>
     <li><a href="#intro">intro</a>
     <li><a href="#end">the end</a>
 </ul>        
 <h2><a name="intro">CSS3 selectors and the :target pseudo class</a></h2>
<h2><a name="end">Look at me - i am the END-Anchor</a></h2>  

And this css

h2 {font-size: 24px; font-weight: heavy; padding: 1em;}
*:target { color: red; font-size: 32px; }

Are the basic setup to change the css of the h2 heading if the url contains the corresponding anchor (either #intro or #end)

How to change content of a tab with internal (anchor) links?

In your major update you write: "If I am on the page the URL updates when I click on the link within the page but it does not change the content"

In your page all tabs (tab Email) are working fine and are loading their corresponding content. So i assume that you are talking about the links in the footer of the page crazy.html:

<div class="BottomInfo" id="A234">
    <div class="Links3">
        <a href="Contact.php">Contact</a>
        <ul id="Nottabs">
            <li class="Lactive">foo</li>
            <li><div class="LinkText" id="LinksTT2"> 
                    <a class="icon_accept" href="#Email">Email Us</a></div>
            </li>
        </ul><!---Ends ul id "Nottabs-->
    </div>
</div>

If you click on this link the content is not updated since you do not have an event handler attached for the links in the footer.

No Event handler for links at footer

With chrome devtools you can see that there are no event handlers attached to the links in the footer.

.

In your javascript you add a click event for every DOM Node that matches this selector $("#tabs li"). In your footer (BottomInfo) the list item does not match the same selector like the one in your tabs. Therefore nothing happens when you click on the links in the footer. If you add an event handler for the list items $("#Nottabs li").click(... and put the same code as in your tabs it should work.

$("#Nottabs li").click(function () {
   // similar to your tab solution 
   // you have to attach a click-event handler 
   // to the list item in your BottomInfo 
}

Fully working demo with javascript and css 2

Please take a look at the fully working demo with your code as a starting point.

Please let me know if this solves your problem

Minor update

I found a demo for tabs using css3. This is quite impressive.

Answer 2

I have a MUCH simpler solution for you. use the CSS3 property of :target for your tabbed interface. Everything will just start working for you that way.

Also, you can use selectivizr to polyfill it for older browsers.

basically you define different divs with the tabbed content. and set it to display:none And div:target { display:block; }

and the tab buttons can be simple links to #idnameofDiv

It's really quite easy. It should be perfect for you, PLUS NO javascript.