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.
