CODEWITHSUNDEEP
jqueryhtml
Prithviraj Mitra
Prithviraj Mitra

Reputation: 11812

Add class to id using jquery

I have the following html

<div class="col-3">
 <a href="#tab-1">
  <span class="plus" data-tab="tab-1">+</span>
 </a>
</div>
<div class="col-3">
 <a href="#tab-2">
  <span class="plus" data-tab="tab-2">+</span>
 </a>
</div>
<div class="col-3">
 <a href="#tab-3">
  <span class="plus" data-tab="tab-3">+</span>
 </a>
</div>

I want to change the + to - on clicking each plus symbol.

Here is the demo

http://jsfiddle.net/squidraj/ss2fs5to/9/

Any help is highly appreciated. Thanks in advance.

Upvotes: 0

Views: 728

Answers (3)

Iecya
Iecya

Reputation: 279

If you want to change from "+" to "-" then you can just change text when you click the symbol, like this:

 $('.col-3 a').click(function (e) { // Or bind to any other event you like, or call manually

     e.preventDefault();

     $(this).find('span').text('-');

 });

Otherwise, if you want to switch from "+" to "-" and viceversa, I suggest this solution:

HTML

<div class="col-3">
    <a href="#tab-1">
        <span class="plus" data-tab="tab-1"></span>
    </a>
</div>


<div class="col-3">
    <a href="#tab-2">
        <span class="plus" data-tab="tab-2"></span>
    </a>
</div>

<div class="col-3">
    <a href="#tab-3">
        <span class="plus" data-tab="tab-3"></span>
    </a>
</div>

CSS

.col-3 {
    width:100px;
    display:inline-block;
    height:200px;
}

.plus:after {
    content: "+";
}

.minus:after {
    content: "-";
}

JS

$('.col-3 a').click(function (e) { // Or bind to any other event you like, or call manually

     e.preventDefault();

     $(this).find('span').toggleClass('plus minus');

 });

Here's my demo

Upvotes: 0

Turnip
Turnip

Reputation: 36652

Your href's contain a # symbol which needs to be removed if you wish to use this as part of your selector.

You are also trying to use .data() incorrectly, .data() gets or sets the data attribute; it doesn't select the element. You need to construct your selector as below...

 $('.col-3 a').click(function (e) { // Or bind to any other event you like, or call manually
     e.preventDefault();
     var tabid = ($(this).attr("href")).replace('#',''); // remove #
     $('.plus[data-tab=' + tabid + ']').text("-"); // select by data attribute
 });
.col-3 {
    width:100px;
    display:inline-block;
    height:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-3"> <a href="#tab-1">
      <span class="plus" data-tab="tab-1">+</span>
     </a>

</div>
<div class="col-3"> <a href="#tab-2">
      <span class="plus" data-tab="tab-2">+</span>
     </a>

</div>
<div class="col-3"> <a href="#tab-3">
      <span class="plus" data-tab="tab-3">+</span>
     </a>

</div>

This would be a much simpler option however...

$('.col-3 a').click(function (e) { 
     e.preventDefault();
    $(this).find('span').text("-");
 });
.col-3 {
    width:100px;
    display:inline-block;
    height:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-3"> <a href="#tab-1">
      <span class="plus" data-tab="tab-1">+</span>
     </a>

</div>
<div class="col-3"> <a href="#tab-2">
      <span class="plus" data-tab="tab-2">+</span>
     </a>

</div>
<div class="col-3"> <a href="#tab-3">
      <span class="plus" data-tab="tab-3">+</span>
     </a>

</div>

Upvotes: 1

Dejan Munjiza
Dejan Munjiza

Reputation: 798

Why don't you do this with pure css? For e.g:

.col-3 a:hover .plus {
    display: none;
}

Here is a fiddle example link: http://jsfiddle.net/ss2fs5to/10/

Upvotes: 0

Related Questions