CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstraptwitter-bootstrap-3
Jesse Luke Orange
Jesse Luke Orange

Reputation: 1999

Toggling on click

I have a situation in which I am using Bootstrap collapse to create growing and shrinking content.

I have a class called my-btn which has a background image of a downwards arrow. When I click on this button I want to add a class called open.

    .my-btn{
    background-image:url(../img/template-1/read-more-closed.png);
                background-repeat:no-repeat;
                background-position:center;
                width:50px;
                height:50px;
				margin-bottom:50px;
    }

    .open{
	  background-image:url(../img/template-1/read-more-open.png);
                background-repeat:no-repeat;
                background-position:center;
                width:50px;
                height:50px;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

 <button class="btn my-btn" type="button" data-toggle="collapse" data-target="#collapse4" 
                  aria-expanded="false" aria-controls="collapseExample">&nbsp;</button>

By adding the open class after my-btn, the arrow is changed... but how can I acheive this using CSS/js?

UPDATE

I have tried

 <script>

$(document).ready(function(){
$('.my-btn').on('click', function(){
    $(this).toggleClass('open');
});
});   
          </script>

But on toggle, bootstrap adds the collaPSED CLASS BUT MY CODE IS IGNORED.

Upvotes: 1

Views: 331

Answers (3)

Adam
Adam

Reputation: 518

You can quickly and easily achieve this using an on click function combined with a toggle class function for adding/removing classes after your button is clicked.

See below for working code.

$('.btn').on('click', function() {
    $(this).toggleClass('open');
});
.my-btn{
    background-image:url(../img/template-1/read-more-closed.png);
                background-repeat:no-repeat;
                background-position:center;
                width:50px;
                height:50px;
				margin-bottom:50px;
    }

    .open{
	  background-image:url(../img/template-1/read-more-open.png);
                background-repeat:no-repeat;
                background-position:center;
                width:50px;
                height:50px;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

 <button class="btn my-btn" type="button" data-toggle="collapse" data-target="#collapse4" 
                  aria-expanded="false" aria-controls="collapseExample">&nbsp;</button>

Upvotes: 1

Titus
Titus

Reputation: 22474

You can do something like this:

.my-btn{
background-image:url(../img/template-1/read-more-closed.png);
            background-repeat:no-repeat;
            background-position:center;
            width:50px;
            height:50px;
            margin-bottom:50px;
}

.open{
  background-image:url(../img/template-1/read-more-open.png);
            background-repeat:no-repeat;
            background-position:center;
            width:50px;
            height:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn my-btn" type="button" data-toggle="collapse" data-target="#collapse4" 
              aria-expanded="false" aria-controls="collapseExample" onclick="this.classList.toggle('open')">&nbsp;</button>

The important part is onclick="this.classList.toggle('open')", this JavaScript code will toggle the "open" class (remove it if it exists or add it if it doesn't).

Keep in mind that the classList.toggle function is not supported by all browser. You may have to use some polyfill if you want to support all browsers.

Upvotes: 1

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

You can use the toggleClass() function:

$('.my-btn').on('click', function() {
    $(this).toggleClass('open');
});

Upvotes: 0

Related Questions