JQuery setting CSS display: none when should be block

Question

I'm looking to load a text file into a content div when the user selects a tab, the content is being inserted into the HTML file but the content div is being set to style="display: none;.

How can I get it to set the display to block whenever the relevant tab is selected and set all other contents divs to hide?

JQuery:

$(document).ready(function() {
  function resetTabs() {
    $("#content > div").hide();
    $("#tabs a").attr("id", "");   
  }

  var myUrl = window.location.href;
  var myUrlTab = myUrl.substring(myUrl.indexOf("#"));
  var myUrlTabName = myUrlTab.substring(0, 4);

  (function () {
    $("#content > div").hide(); 
    $("#tabs li:first a").attr("id", "current");
    $("#content > div:first").fadeIn(); 

    $("#tabs a").on("click", function (e) {
      e.preventDefault();
      if ($(this).attr("id") == "current") {
        return
      }
      else {
        resetTabs();
        $(this).attr("id", "current"); 
        $($(this).attr('name')).fadeIn();
      }
    });

    for (i = 1; i <= $("#tabs li").length; i++) {
      if (myUrlTab == myUrlTabName + i) {
        resetTabs();
        $("a[name='" + myUrlTab + "']").attr("id", "current");
        $(myUrlTab).fadeIn();
      }
    }
  })()
});


$(document).ready(function() {
  $("#tabContent1").load("test.txt");
  $('a[name="#tab2"]').click(function() {
    $("#tabContent2").load("test.txt");
  });
});

HTML:

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="CSS/common.css" />
    <script src="JS/common.js"></script>
    <title></title> 
  </head>
  <body>
    <nav>
      <ul id="tabs">
        <li><a href="#" id="tab1" name="#tab1">Home</a></li>
        <li><a href="#" id="tab2" name="#tab2">History</a></li>
        <li><a href="#" id="tab3" name="#tab3">Specifications</a></li>
        <li><a href="#" id="tab4" name="#tab4">Gallery</a></li>    
      </ul>
    </nav>
    <div id="content">
      <div id="tabContent1"></div>
      <div id="tabContent2"></div>
      <div id="tabContent3"></div>
      <div id="tabContent4"></div>
    </div>
  </body>
</html>

I'm also getting the following error:

Uncaught TypeError: Object #tabContent2 has no method 'fadeIn'
i
st.event.dispatch 
st.event.add.y.handle

$($(this).attr('name')).fadeIn(); should be $(this).attr('name').fadeIn(); — KBN
– KBN, Commented Feb 11, 2013 at 15:12

Jaco Koster · Accepted Answer · 2013-02-11 15:27:51Z

1

How are tabContent and the tab connected? Try setting the name of the tabs to the actual content id's like this:

<nav>
  <ul id="tabs">
    <li><a href="#" id="tab1" name="#tabContent1">Home</a></li>
    <li><a href="#" id="tab2" name="#tabContent2">History</a></li>
    <li><a href="#" id="tab3" name="#tabContent3">Specifications</a></li>
    <li><a href="#" id="tab4" name="#tabContent4">Gallery</a></li>    
  </ul>
</nav>
<div id="content">
  <div id="tabContent1"></div>
  <div id="tabContent2"></div>
  <div id="tabContent3"></div>
  <div id="tabContent4"></div>
</div>

This way your function $($(this).attr('name')).fadeIn(); should work a little bit better.

answered Feb 11, 2013 at 15:27

Jaco Koster

4973 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Colin747 Over a year ago

I've done this but I'm still having the same problem where the CSS on the content divs are set to none.

Jaco Koster Over a year ago

I've added your code in a JSFiddle and removed all unneeded code for this specific question. This works. jsfiddle.net/XGaYR

IanO.S. · Accepted Answer · 2013-02-11 16:09:38Z

0

try this for your fadeIn

var title = $('#current').attr('name');
$(title).fadeIn()

instead of

  $($(this).attr('name')).fadeIn();

(oops check edit)

edited Feb 11, 2013 at 16:09

answered Feb 11, 2013 at 15:58

IanO.S.

1,3801 gold badge10 silver badges20 bronze badges

1 Comment

IanO.S. Over a year ago

in what browser? in firefox, go to your page, click on a tab, in console type => var title = $('#current').attr('name'); $(title).fadeIn() , it fades in the corresponding divs

Colin747 · Accepted Answer · 2013-02-11 22:15:38Z

Got it working using a combination of @Jaco Koster JSFiddle and the following JQuery.

$(document).ready(function () {
  $("#tabContent1").load("test.txt");

  $('a[name="#tabContent1"]').click(function () {
    $("#tab2").removeClass('activeTab');
    $("#tab3").removeClass('activeTab');
    $("#tab4").removeClass('activeTab');
    $(this).addClass('activeTab');
    $("#tabContent1").load("test.txt");
    $("#tabContent1").show();
    $("#tabContent2").hide();
    $("#tabContent3").hide();
    $("#tabContent4").hide();
  });

  $('a[name="#tabContent2"]').click(function () {
    $("#tab1").removeClass('activeTab');
    $("#tab3").removeClass('activeTab');
    $("#tab4").removeClass('activeTab');
    $(this).addClass('activeTab');
    $("#tabContent2").load("test2.txt");
    $("#tabContent2").show();
    $("#tabContent1").hide();
    $("#tabContent3").hide();
    $("#tabContent4").hide();
  });

  $('a[name="#tabContent3"]').click(function () {
    $("#tab1").removeClass('activeTab');
    $("#tab2").removeClass('activeTab');
    $("#tab4").removeClass('activeTab');
    $(this).addClass('activeTab');
    $("#tabContent3").load("test3.txt");
    $("#tabContent3").show();
    $("#tabContent1").hide();
    $("#tabContent2").hide();
    $("#tabContent4").hide();
  });

  $('a[name="#tabContent4"]').click(function () {
    $("#tab1").removeClass('activeTab');
    $("#tab2").removeClass('activeTab');
    $("#tab3").removeClass('activeTab');
    $(this).addClass('activeTab');
    $("#tabContent4").load("test4.txt");
    $("#tabContent4").show();
    $("#tabContent1").hide();
    $("#tabContent2").hide();
    $("#tabContent3").hide();
  });
});

Collectives™ on Stack Overflow

JQuery setting CSS display: none when should be block

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related