toggle div tag javascript

I need a simple script to toggle a div tag on and off on an onclick link event

And please tell me where to place the script.
In a scrip section in the head of the page or at the bottom of the page

I currently have this

<style type="text/css">
        .eAddress {
            height: 60px;
            line-height: 60px;
            text-align: left;
            color: #8898AA;
            font-weight: bold;
            padding-left: 50px;
            width: 100%;
            display: none;
            clear: left;
        }
    </style>

<div id="divEditAddress" class="eAddress">TEST</div>
<div class="btAddress"><button id="btnAddress">Edit Address</button></div>
Larry Bristersr. DeveloperAsked:
Who is Participating?
 
Julian HansenConnect With a Mentor Commented:
Here is how you do it with one line of inline JavaScript
<div class="btAddress"><button id="btnAddress" onclick="document.getElementById('divEditAddress').style.display = (document.getElementById('divEditAddress').style.display == 'block') ? 'none' : 'block';">Edit Address</button></div> 

Open in new window

Here is how you do it with a plain JavaScript event handler
var targetDiv = document.getElementById('divEditAddress');
document.getElementById('btnAddress').addEventListener('click', function() {
	targetDiv.style.display = (targetDiv.style.display == 'block') ? 'none' : 'block';
})

Open in new window

Here is how you do it with jQuery
<script>
$(function() {
	$('#btnAddress').click(function() {
		$('#divEditAddress').toggle();
	});
});
</script>

Open in new window


Working sample here
0
 
Miguel OzSoftware EngineerCommented:
Use jquery toggle at scrip section  bottom of the page:
http://api.jquery.com/toggle/
<script>
$('#yourLinkId').on('click', function(){
	var targetDiv = $('#divEditAddress').toggle();;
});
</script>

Open in new window

0
 
Larry Bristersr. DeveloperAuthor Commented:
Thanks
0
 
Julian HansenCommented:
You are welcome.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.