JQuery: toggle css properties on/off

Question

With my website I'm trying to do some JQuery which I thought would be simple (as a beginner):

Click a div/button in a news header.
As a result, have the image in it rotate/replaced (arrow).
As a result, create a scrollbar in the div below the header.
Click the div/button again and it toggles back to its original position.

I've managed to make things work, but only with two separate divs/arrows, this in the following manner:

$(document).ready(function(){
    $('.scroll').css('cursor', 'pointer').on('click', function() {
        $('.news-section-links-internal-1').css({
            overflow: 'scroll',
            marginRight: '0px',
            width: '230px',
            paddingRight: '15px'
        }); 
    });

    $('.noscroll').css('cursor', 'pointer').on('click', function() {
        $('.news-section-links-internal-1').css({
            overflow: 'hidden',
            marginRight: '15px',
            width: '225px',
            paddingRight: '0px'
        });               
    }); 
});

It looks a little crude though, so I've been trying to combine this code so it works with one toggle div/button based on tips found on Stackoverflow. Below is an example of that:

$(document).ready(function(){
    $(".scroll").css('cursor', 'pointer').toggle( function() {
        $('.news-section-links-internal-1').css({             
            overflow: 'scroll',
            marginRight: '0px',
            width: '230px',
            paddingRight: '15px'
        });
    }, function () {
        $('.news-section-links-internal-1').css({            
            overflow: 'hidden',
            marginRight: '15px',
            width: '225px',
            paddingRight: '0px'
        });
    }); 
});

Unfortunately, the combined code never works. In the above example the toggle div/button simply fades out when I load the page and that's it.

Can anyone help me with this problem? I don't need a whole lot of JQuery on my page, but this is quite crucial. Been trying for two days.

If it helps, here's all the relevant CSS:

.news-section-links {
    background-color: #fffffc;
    width: 245px !important;
    padding-right: 0px;
    padding-left: 5px;
    padding-top: 1px;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
}

.news-section-links-internal-1 {
    width: 225px;
    height: 200px;
    background-color: #fffffc;
    margin-right: 15px;
    overflow: hidden;
}

`toggle()` event method has been removed from jQuery 1.9 http://api.jquery.com/toggle-event/ Use click event instead http://stackoverflow.com/questions/14338078/equivalent-of-deprecated-jquery-toggle-event — A. Wolff, Jul 10 '15 at 10:54
@RohitAzad It is no more working http://jsfiddle.net/crvcevoh/1/ — A. Wolff, Jul 10 '15 at 10:57

score 0 · Answer 1 · answered Jul 10 '15 at 11:05

Hi now you can try to toggleClass as like this .

$(document).ready(function(){
    $(".scroll").on('click', function(){
        $('.news-section-links-internal-1').toggleClass('class-1');
    });     
});

.class{
    overflow:hidden;
            margin-right: 15px;
            width: 225px;
            padding-right: 0;
}
.class-1.class{
            margin-right: 0;
            width: 230px;
            padding-right: 15px;
    overflow:scroll;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="news-section-links-internal-1 class">This is Demo text This is Demo text This is Demo text This is Demo text This is Demo text This is Demo text This is Demo text This is Demo text </div>


<button class="scroll">Click here for result</button>

more info toggleClass

Seriously, how do I reply when I can't hit the enter button to go down a line? *working on that issue* — Jake145, Jul 10 '15 at 12:54

JQuery: toggle css properties on/off

1 Answers1