Set css style on click and remove them on click

Question

I want to set style when I click on div. I done this, It's work. But I want when its clicked and when I click to set the default style.

     $('#tray-button').click(function() {
       $('.buttons-content').css('bottom', '160px');
    });

 <div class="buttons-content">
        <div id="tray-button" class="button">
            <div class="white"></div>
            <div class="black"></div>
            <i class="fas fa-grip-horizontal"></i>
        </div>
        <div class="button">
            <div class="white"></div>
            <div class="black"></div>
            <i class="fas fa-share-alt"></i>
        </div>
        <div class="button play-pause play">
            <div class="white"></div>
            <div class="black"></div>
            <i class="far fa-1-1x  fa-play-circle"></i>
        </div>
        <div class="button rotate">
            <div class="white"></div>
            <div class="black"></div>
            <i class="fas fa-expand-alt"></i>
        </div>
    </div>

buttons-content - default bottom: 40;

When click on #tray-button -> bottom: 160px;
When click again on #tray-button -> bottom: 40px; (default)

Fabrizio Calderan · Accepted Answer · 2018-10-30 11:25:18Z

4

Define a specific CSS rule e.g.

.buttons-content.toggled {
   bottom: 160px;
}

with a .toggled class and on click toggle that class

$('#tray-button').click(function() {
   $('.buttons-content').toggleClass('toggled');
});

When the class is removed the style of the element will be automatically reset to the previous state. Furthermore your script is more mantainable because the style is not hardcoded within.

edited Oct 30, 2018 at 11:25

answered Oct 30, 2018 at 11:12

Fabrizio Calderan

124k26 gold badges171 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yanick Palmers · Accepted Answer · 2018-10-30 13:00:35Z

0

this script just remembers the last state and does whatever you want.

$( document ).ready(function() {
var stack = 0
$("#tray-button").click(function()
{
if (stack === 0){
}
$('.buttons-content').css('bottom', '160px');
stack = 1;
}else{
$('.buttons-content').css('bottom', '40px');
stack = 0;
}

});

answered Oct 30, 2018 at 13:00

Yanick Palmers

12 bronze badges

Collectives™ on Stack Overflow

Set css style on click and remove them on click

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related