Toggle padding of a <h1> tag

html, javascript, jquery, onclick

Solution

Try,

HTML:

<h1 id="id1">My Heading 1</h1>
<input id="button" type="submit" name="button" value="enter"/>

JS:

$('#button').on('click', function(){
    $('h1').css('padding-left', function(_,val){
       return parseInt(val,10) == 0 ? 50 : 0;
    })
});

DEMO

Problem

I've got one h1 tag and two buttons: ``` <h1 id="id1">My Heading 1</h1> <input id="button" type="submit" name="button" value="enter"/> <input id="button2" type="submit" name="button" value="enter2"/> ``` Is there a better (or just shorter) way to do this: ``` $('#button').on('click', function(){ $('h1').css('padding-left', '50px') $('#button').css('display', 'none') $('#button2').css('display', 'block'); }); $('#button2').on('click', function(){ $('h1').css('padding-left', '0px') $('#button').css('display', 'block') $('#button2').css('display', 'none'); }); ``` Note : Maybe I don't need two buttons but only one?

Original source