CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jitendra
Jitendra

Reputation: 23

Add a toggle functionality to a text

My basic requirement is to add a dropdown in my site. I need when someone clicks on a text, a form will show there with a animate effect from top to bottom and will again hide if we click on the text again.

You can visit my page where I want this feature:

http://test.techkalph.com/listing-plain-heading/?filter=all&type=travel-travel-agents&submit=

Here on the right sidebar, on the very top, you can see a button saying Search by Location. When you inspect that button, you can see there is a form under a div below that button which I have made display:none to hide that.

I want to show that form when click on the button and again hide that upon clicking there (Toggle feature) with some animate effect will be fine.

I have added this script there for that purpose which you can also find in the inspect element:

<script>
    jQuery(document).ready(function($){
        $(".section-sidebar #custom_location").click(function(){
            $(".section-sidebar div #directory-advance-search-form").show();
        });
        $(".section-sidebar #custom_location").click(function(){
            $(".section-sidebar div #directory-advance-search-form").hide();
        });
    });
</script>

But it is not working. Am I doing something wrong? Please visit my above page and help me to show the form on click and hide again on click.

Thank you in advance.

Upvotes: 1

Views: 55

Answers (2)

Jitendra
Jitendra

Reputation: 23

I have added this script instead to make the form toggle with a time interval:

<script>
    jQuery(document).ready(function($){
        $(".section-sidebar #custom_location").click(function(){
            $(".section-sidebar div #directory-advance-search-form").toggle(1000);
        });
    });
</script>

Users can adjust the 1000 as per their requirement here.

Thank you again Kevin.

Upvotes: 0

Kevin Ard
Kevin Ard

Reputation: 604

Your js looks to be redundant: In the same click handler, you're showing and hiding the div - effectively, you're doing nothing :)

Instead, use a single call to $(".section-sidebar div #directory-advance-search-form").toggle()

Something along the lines of: 

jQuery(document).ready(function($){
    $(".section-sidebar #custom_location").click(function(){
        $(".section-sidebar div #directory-advance-search-form").toggle();
    });
});

I tested this in the console and it works fine.

If you must use separate handlers for whatever reason (I know: sometimes projects have very odd requirements), you should use a flag-test operation:

  1. set a boolean, something like var advIsShown=false
  2. when showing\hiding, toggle the boolean state.
  3. test for this state before you decide whether to call .show() or .hide()

Upvotes: 1

Related Questions