CODEWITHSUNDEEP
javascriptjqueryhtmlcss
lowercanada
lowercanada

Reputation: 17

using jquery to addclass when an anchor is clicked

having trouble with this. Any help would be appreciated. I'm trying to add the "slide" class to the left-menu div by using the Id "lm" doesn't seem to be working for me.

$(document).ready(function() {});

$("#toggle", ).click(function() {
  $("#lm").addClass("slide");
});
  .left-menu {
  height: 55%;
  width: 45%;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0;
  list-style: none;
  border-right: 2px solid #fff;
  background-color: #000;
  z-index: 1000;
}

.slide {
  -webkit-transform: translate(-20, 0);
  -moz-transform: translate(-20em, 0);
  -o-transform: translate(-20em, 0);
  -ms-transform: translate(-20em, 0);
  transform: translate(-51em, 0);
  -webkit-transition: 10s;
  -moz-transition: 10s;
  -o-transition: 10s;
  transition: 10s;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="container-fluid header">
  <div class="text-vertical-center apple-effect">
    <a id="toggle" href="#">[sv]</a> </div>
</header>
<div class="container-fluid">
  <div class="left-menu" id="lm" role="navigation">
    <a class="nav-link" href="#">Home</a>
  </div>

Upvotes: 1

Views: 95

Answers (5)

prasanth
prasanth

Reputation: 22490

Try this .Your jquery code has syntax error & Not with proper format Change as like this ,

Why ?

  1. You should add the click function inside the $(document).ready(function() {//click function}) not with outside , And its not closing properly })
  2. Also css slide class not closing properly }
  3. $("#toggle,") its a invalid selector .so remove the , in $("#toggle,")

Note Don't forget to add jquery library link

Working Example

$(document).ready(function() {
$("#toggle").click(function() {
$("#lm").addClass("slide");
});
})
.left-menu {
  height: 55%;
  width: 45%;
  position: absolute;
  top: 100px;
  left: 0;
  padding: 0;
  list-style: none;
  border-right: 2px solid #fff;
  background-color: #000;
  z-index: 1000;
}

.slide {
  -webkit-transform: translate(-20, 0);
  -moz-transform: translate(-20em, 0);
  -o-transform: translate(-20em, 0);
  -ms-transform: translate(-20em, 0);
  transform: translate(-51em, 0);
  -webkit-transition: 10s;
  -moz-transition: 10s;
  -o-transition: 10s;
  transition: 10s;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="container-fluid header">
  <div class="text-vertical-center apple-effect">
    <a id="toggle" href="#">[sv]sxx</a> </div>
</header>
<div class="container-fluid">
  <div class="left-menu" id="lm" role="navigation">
    <a class="nav-link" href="#">Home</a>
  </div>

Upvotes: 1

Summy
Summy

Reputation: 533

This is because you are using jquery click function which is going to be deprecated soon, please use 

$("#toggle").on('click', function(){
   $("#lm").addClass("slide");
});

Upvotes: 0

Abhishek Rana
Abhishek Rana

Reputation: 56

Add click event inside document.ready() function. And remove ',' after #toggle.

$(document).ready(function(){
$("#toggle").click(function(){
   $("#lm").addClass("slide");
});

});

Upvotes: 0

Milan Chheda
Milan Chheda

Reputation: 8249

Just remove that comma and check the below code.

$(document).ready(function() {
  $("#toggle").click(function() {
    $("#lm").addClass("slide");
  });
})
.left-menu {
  height: 55%;
  width: 45%;
  position: absolute;
  top: 100px;
  left: 0;
  padding: 0;
  list-style: none;
  border-right: 2px solid #fff;
  background-color: #000;
  z-index: 1000;
}

.slide {
  -webkit-transform: translate(-20, 0);
  -moz-transform: translate(-20em, 0);
  -o-transform: translate(-20em, 0);
  -ms-transform: translate(-20em, 0);
  transform: translate(-51em, 0);
  -webkit-transition: 10s;
  -moz-transition: 10s;
  -o-transition: 10s;
  transition: 10s;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="container-fluid header">
  <div class="text-vertical-center apple-effect">
    <a id="toggle" href="#">[sv]sxx</a> </div>
</header>
<div class="container-fluid">
  <div class="left-menu" id="lm" role="navigation">
    <a class="nav-link" href="#">Home</a>
  </div>

Upvotes: 1

Sagar Jajoriya
Sagar Jajoriya

Reputation: 2375

Your syntax is wrong, put the click FUNCTION in the $(document).ready(), and also there is a comma(,) exist in your script at this line $("#toggle",).click(). Remove it.

Try this :

$(document).ready(function(){
    $("#toggle").click(function(){
       $("#lm").addClass("slide");
    });
});

Upvotes: 2

Related Questions