Hide / show div toggle
- by aa1
I have the following mark up with a basic and advanced search divs.
<div class="form">
<form>
<input type="text" name="first_name">
<input type="text" name="last_name">
<div id="Basic" class="slide">
<input type="text" name="location">
</div>
<a onclick="ShowDiv('Adv');">+ show advanced fields</a>
<div id="Adv" class="slide hidden">
<input type="text" name="first_name2">
<input type="text" name="last_name2">
<input type="text" name="street">
<input type="text" name="town">
<input type="text" name="country">
</div>
</form>
<a onclick="ShowDiv('Basic');">- hide advanced fields</a>
</div>
The toggle is achieved with the following script
function HideDiv() {
$('.slide').hide();
}
function ShowDiv(ctrl) {
HideDiv();
$('#' + ctrl).show();
}
ShowDiv('Basic');
I need to eliminate the need of using both links. I need to have only one link depending on state. So if the div basic is shown as default the link will say show advanced. When the advanced is shown the anchor link should switch to hide advanced
How do I need to edit my jQuery and mark up.
