Why is CSS not being applied after adding a class with JQuery?

Question

So it works in jfiddle.

//site .js
(function() {
  var $sidebarAndWrapper = $("#sidebar,#wrapper");
  $("#sidebarToggle").on("click", function() {
    $sidebarAndWrapper.toggleClass("hide-sidebar");

    if ($sidebarAndWrapper.hasClass("hide-sidebar")) {
      $(this).text("Show Sidebar");
    } else {
      $(this).text("Hide Sidebar");
    }
  });
})();

/*site.css*/

body {
  font-family: sans-serif;
  font-size: 14px;
  margin: 0;
}

label {
  font-weight: bold;
  display: block;
}

input[type=text],
input[type=password],
textarea {
  width: 150px;
}

#main {
  background-color: #eee;
  padding: 4px;
  margin: 0;
}

#footer {
  background-color: #222;
  color: #eee;
  padding: 8px 5px;
  position: fixed;
  bottom: 0;
  width: 100%;
}

.headshot {
  max-width: 50px;
  border: 1px solid #222;
  padding: 3px;
}

.menu {
  font-size: 12px;
}

.menu li {
  list-style-type: none;
}

.menu li.active {
  font-weight: bold;
}

.menu li a {
  color: #eee;
}

#sidebar {
  background: #2a2c36;
  color: #eee;
  position: fixed;
  height: 100%;
  width: 250px;
  overflow: hidden;
  left: 0;
  margin: 0;
  transition: left ease .25s;
}

#sidebar.hide-sidebar {
  left: -250px;
  transition: left ease .25s;
}

#wrapper {
  margin: 0 0 0 250px;
  transition: margin-left ease .25s;
}

#wrapper.hide-sidebar {
  margin-left: 0;
  transition: margin-left ease .25s;
}

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css/site.css" />
</head>

<body>

  <div id="sidebar" class="">
    <span id="userName">Test</span>
    <ul class="menu">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>

  </div>

  <div id="wrapper" class="">
    <div id="main">
      <div>
        <button id="sidebarToggle">Toggle Menu</button>
      </div>
      <h1>My site</h1>

    </div>
    <div id="footer">
      &copy; 2017
    </div>
  </div>


  <script type="text/javascript" src="lib/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="js/site.js"></script>


</body>
</html>

For some reason it doesn't work when I debug it from visual studio. The JQuery is working and adds the class to the specified targets but the CSS does not get applied to them.

I do have the css in its own file and the JQuery in its own file as well. I've added where my files are placed in comments just to show how it looks.

I must be missing something but what could it be?

Please include a minimal reproducible example to your question. External links can become unreachable for many reasons making the question impossible to answer — blurfus
– blurfus, Commented Mar 27, 2017 at 3:51
check if the CSS is being overridden. Try using !important in CSS to avoid "cascading" (only for debugging purpose). The developer tools in your favourite browser could help — Aniket Inge
– Aniket Inge, Commented Mar 27, 2017 at 3:55
Are you sure about that the class is added to the element when you test it in visual studio? — t.niese
– t.niese, Commented Mar 27, 2017 at 4:07
your code is working fine please check it if change then tell me. jsfiddle.net/S2B5Z/8 — Gohel Dhaval
– Gohel Dhaval, Commented Mar 27, 2017 at 4:16
can you include your source code? you mention that this jsfiddle is working that means your actual implementation has an error. So please share with us the code that is not working so we can provide an advice or solution — Teocci
– Teocci, Commented Mar 27, 2017 at 4:52

Đào Minh Hạt · Accepted Answer · 2017-03-27 05:57:41Z

It works fine in my end but you forgot to inluce jQuery, maybe you will need to add prefix -webkit- for transition css3 if you are using old browser.

//site .js
(function() {
  var $sidebarAndWrapper = $("#sidebar,#wrapper");
  $("#sidebarToggle").on("click", function() {
    $sidebarAndWrapper.toggleClass("hide-sidebar");

    if ($sidebarAndWrapper.hasClass("hide-sidebar")) {
      $(this).text("Show Sidebar");
    } else {
      $(this).text("Hide Sidebar");
    }
  });
})();

/*site.css*/

body {
  font-family: sans-serif;
  font-size: 14px;
  margin: 0;
}

label {
  font-weight: bold;
  display: block;
}

input[type=text],
input[type=password],
textarea {
  width: 150px;
}

#main {
  background-color: #eee;
  padding: 4px;
  margin: 0;
}

#footer {
  background-color: #222;
  color: #eee;
  padding: 8px 5px;
  position: fixed;
  bottom: 0;
  width: 100%;
}

.headshot {
  max-width: 50px;
  border: 1px solid #222;
  padding: 3px;
}

.menu {
  font-size: 12px;
}

.menu li {
  list-style-type: none;
}

.menu li.active {
  font-weight: bold;
}

.menu li a {
  color: #eee;
}

#sidebar {
  background: #2a2c36;
  color: #eee;
  position: fixed;
  height: 100%;
  width: 250px;
  overflow: hidden;
  left: 0;
  margin: 0;
  transition: left ease .25s;
}

#sidebar.hide-sidebar {
  left: -250px;
  transition: left ease .25s;
}

#wrapper {
  margin: 0 0 0 250px;
  transition: margin-left ease .25s;
}

#wrapper.hide-sidebar {
  margin-left: 0;
  transition: margin-left ease .25s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css/site.css" />
</head>

<body>

  <div id="sidebar" class="">
    <span id="userName">Test</span>
    <ul class="menu">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>

  </div>

  <div id="wrapper" class="">
    <div id="main">
      <div>
        <button id="sidebarToggle">Toggle Menu</button>
      </div>
      <h1>My site</h1>

    </div>
    <div id="footer">
      &copy; 2017
    </div>
  </div>


  <script type="text/javascript" src="lib/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="js/site.js"></script>


</body>
</html>

Collectives™ on Stack Overflow

Why is CSS not being applied after adding a class with JQuery?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related