CODEWITHSUNDEEP
javascriptjquery
ryantinsley
ryantinsley

Reputation: 53

Beginner JQuery Toggling classes

I'm working on for a project. I have had a quick go at [coding some buttons(https://codepen.io/ryantinsley/pen/XqOBGb). I have created 2 states. A blue selected class and an outlined deselected class. I want to switch between these two classes each time I click on one of the buttons.

I have tried numerous things in jQuery and some things have worked to a point such as changing h1 text colours, but apart from that nothing seems to work for me.

In short I am looking for the best way to toggle between the two buttons on every click.

Thanks in advance for all you help

h1 {
  font-family: sans-serif;
  font-size: 16px;
  font-weight: light;
  display: inline;
}

#star {
  background-image: url("https://image.ibb.co/mdSJgT/Hollow_Star.png");
  width: 14px;
  height: 14px;
  display: inline-block;
}

#container {
  padding: 8px 8px;
  border: solid 1px;
  display: inline-block;
}

#starselect {
  background-image: url("https://image.ibb.co/hZ2Uo8/Filled_Star.png");
  width: 14px;
  height: 14px;
  display: inline-block;
}

#containerselect {
  padding: 8px 8px;
  display: inline-block;
  background: #006DEF;
}

#h1select {
  font-family: sans-serif;
  font-size: 16px;
  font-weight: light;
  display: inline;
  color: white;
}
<div id="container">
  <div id="star"></div>
  <h1>Link</h1>
</div>

<div id="containerselect">
  <div id="starselect"></div>
  <h1 id="h1select">Link</h1>
</div>

Upvotes: 1

Views: 36

Answers (3)

Bhumi Shah
Bhumi Shah

Reputation: 9476

You can try the following solution:

https://codepen.io/anon/pen/jxdQav

jQuery

$('.divlink').on('click', function(e){
  $('.divlink').not(this).removeClass('active');
  $(this).addClass('active');
})

HTML

 <div id="container" class="divlink">
     <div id ="star"></div>
    <h1>Link</h1>
 </div>

<div id="container" class="divlink active">
   <div id ="starselect"></div>
   <h1 id ="h1select">Link</h1>
</div>

CSS

h1 {
  font-family: sans-serif;
  font-size: 16px;
  font-weight: light;
  display: inline;
}

#star {
  background-image: url("https://image.ibb.co/mdSJgT/Hollow_Star.png");
  width: 14px;
  height: 14px;
  display: inline-block;
}

#container {
  padding: 8px 8px;
  border: solid 1px;
  display: inline-block;
}

#starselect {
  background-image: url("https://image.ibb.co/hZ2Uo8/Filled_Star.png");
  width: 14px;
  height: 14px;
  display: inline-block;
}

.active {
  padding: 8px 8px;
  display: inline-block;
  background: #006DEF;
}

#h1select {
  font-family: sans-serif;
  font-size: 16px;
  font-weight: light;
  display: inline;
  color: white;
}

Upvotes: 1

Kiran Shahi
Kiran Shahi

Reputation: 7980

convert your id into class and use toggleClass() of jQuery. Here is an example.

$("#button").on("click", function() {
  $(this).children().toggleClass("container containerselect");
  $(this).children().children().eq(0).toggleClass("star starselect");
  $(this).find("h1").toggleClass(" h1select");
});
h1 {
  font-family: sans-serif;
  font-size: 16px;
  font-weight: light;
  display: inline;
}

.star {
  background-image: url("https://image.ibb.co/mdSJgT/Hollow_Star.png");
  width: 14px;
  height: 14px;
  display: inline-block;
}

.container {
  padding: 8px 8px;
  border: solid 1px;
  display: inline-block;
}

.starselect {
  background-image: url("https://image.ibb.co/hZ2Uo8/Filled_Star.png");
  width: 14px;
  height: 14px;
  display: inline-block;
}

.containerselect {
  padding: 8px 8px;
  display: inline-block;
  background: #006DEF;
}

.h1select {
  font-family: sans-serif;
  font-size: 16px;
  font-weight: light;
  display: inline;
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button">
  <div class="container">
    <div class="star"></div>
    <h1>Link</h1>
  </div>
</div>

Upvotes: 3

Rahul Patel
Rahul Patel

Reputation: 639

Firstly create css using classes.

Then you can use :

$("#starselect").click(function() {
   $(this).removeClass('class2');
   $(this).addClass('class1');
});

PS: 1. You can remove or add IDs using attr() function in Jquery. But that is not suggeseted. Because ID defines an element, not its styling.

  1. You can also use toggleClass()

Upvotes: 1

Related Questions