how to add css on click and remove it when they click close button [closed]


Tags: javascript,jquery,html,css

Problem :

How to use the below CSS on click using javascript or jquery. Does anyone know how to do it?

#outer-wrapper {width:100%;max-width:1000px;margin:0 auto;padding:0;text-align:left;float:none;background-position:center!important;}
#post-wrapper {width:100%;max-width:1000px;margin:0 auto;text-align:left;float:none;background-position:center!important;}
.post-body,.post{background-position:center!important;}
#blog1,#artikel,.blog-posts{background-position:center!important;}
.banner,#footer-wrapper,#comments,#sidebar-wrapper,#header-wrapper,#menu-wrapper {display:none;margin-top:0;margin:0;}
.post-inner {padding:0 0 0 0;margin:20px auto;}

My aim is when the user clicks the HTML element the CSS should be applied to that and when he clicks close button the CSS should be removed from the element.



Solution :

HTML

   <button id="start">Start</button> 
     <button id="close">Close</button> 

JS

$('#start').click(function () {
        $(this).addClass('start');

    });

$('#close').click(function () {
        $('#start').removeClass('start');

    });

CSS

.start
{
// css style here
}

    CSS Howto..

    How to remove all CSS property inside a class, but don't remove class using jQuery

    How to add css in post? [closed]

    How to adjust the position of specific elements/items/content on a page with CSS

    how to make a image in div to be dragged just downwards using html5 css jquery animation?

    How to apply css class to uploaded image? [closed]

    How to create DRY CSS when using transform & keyframes

    How can I draw such 2 lines in this shape using CSS HTML

    How can I add multiple classes to a Rails form input with erb?

    How to avoid universal Rule CSS Asterisk(*)?

    How to get CSS triangles to display in a row instead of vertical

    How Can I get my DL to style properly?

    CSS: How to get two DIVs side by side with automatic height, to the height of their container?

    How to get CSS property value from HTML using generalistic JavaScript function
    When you use window.getComputedStyle the method directly return the style attribute calculated of your object. you can access directly the css attribute in the rreturn object. So to solve your...
    Read more

    How to create a firefox addon which injects CSS into a page? [closed]

    How to achieve this oval layout with CSS

    How do I use CSS to to vertically center align an image in a div?

    Increasing font size for links on hover changes background color size, how to stop this?

    How do I change the alignment of my search box?

    How to write css rule with variable to change font-size?

    How to Limit the Div Exactly into the Screen Size

    How to add / remove html elements and content based on the browsing device?

    Show a sharing icon on hover on image

    Why margin:2.5px does not work? How to solve this problem

    How show button hovering above an image or pressing over it? [closed]

    How to get ratio of scale image, when it's autoscaled by background-cover?

    How to make navigation bar of pure css slider?

    How can I change css for every DOM object in the page in SAPUI5

    CSS - How to have 100% height element inside of parent

    background image not showing on nested

    How to change CSS property before element is created?