toggle div tag javascript

Larry Brister
Larry Brister used Ask the Experts™
on
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>
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018
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
Miguel OzSenior Software Engineer
Top Expert 2009

Commented:
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

Larry Bristersr. Developer

Author

Commented:
Thanks
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You are welcome.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial