Search code examples
javascriptjqueryhtmlcsstoggleclass

Changing An Elements Content

I would like to change the content of a element with a button click and then have it return back to its original message. How Would i do this preferable with toggle class if possible.

<doctype html>
<html>
<head>
<meta charset=utf-8>
<title>Day Practice</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"> </script>

</head>
<body>
<h1> HotDogs</h1>
<input type=button id=button value=button>
<script>
$("#button").click(function(){ 
$("h1").html("Change to this");
});


</script>

This changes the header with a button, but I don't know how to revert it when I click on the button again. Maybe Toggle Class, I don't know.

Solution

  • this should solve:

    $( "#button" ).toggle(function() {
  $("h1").html("Change here");
}, function() {
  $("h1").html("Revert back here");
});