Question

I have a simple question but don’t know exactly how to achieve this. All I know is that I have to use the click() function.

Basically, I have a div with the id #box1. I applied the CSS style overflow:auto so that there will be a vertical scroll-bar if the table length (a long table is inside #box1) exceeds the width of the div #box1.

Now I wanted to add a link below the div. The link should do the following:

• On-click, add the CSS for div #box1 from overflow:auto to overflow:visible
• Simultaniously, while it changes the CSS above, the link should change to display a new link (the old one disappears) that will change CSS back to overflow:auto when clicked.

Answer 1

You can use css method.

$('#myButton').click(function(event) {
    event.preventDefault();
    $('#box1').css('overflow', function(i, o) {
        return o == 'auto' ? 'visible' : 'auto';
    })
});

And instead of hiding/showing 2 different buttons, you can use text method:

$('#myButton').click(function(event) {
    // ...  
    $(this).text(function(i, text){
       return text == 'show' ? 'hide' : 'show';
    })
});

http://jsfiddle.net/u6Nc8/