Home/ Questions/Q 7706629
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T00:10:10+00:00

I have the following mark up with a basic and advanced search divs. <div

  • 0

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 also have trhe following JQuery in place that shows the adv div if a user returns to the page from a results page assuming he completed any input fields from the search form initially

//show adv div based on input value data 
$(function(){
    if($("#Adv input[value!='']").length)
        $('#Adv').show(); // if this is the element you want to show.
 });

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    $(function(){
    $(".toggler").click(function(e) {
        e.preventDefault();
        $(this).find("span").toggle();
        $(".togglee").slideToggle();
    });

    //show adv div based on input value data 
    if($("#Adv input[value!='']").length) {
        $('.toggler').click(); // if this is the element you want to show.
    }

});

    And the HTML:

    <html>
    <body>
        <div class="form">
            <form>
                <input type="text" name="first_name">
                <input type="text" name="last_name">

                <div class="Basic togglee" class="slide">
                    <input type="text" name="location">
                </div>

                <div id="Adv" class="slide hidden togglee">
                    <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 class="toggle-link toggler">
                <span>+ show advanced fields</span>
                <span class="hidden">- hide advanced fields</span>
            </a>

        </div>
    </body>
</html>

    jsFiddle example here.

    • 0