CODEWITHSUNDEEP
javascriptjquery
pbytes
pbytes

Reputation: 1

Hide / Show without refreshing, change onclick to act like toggle

Really quick question... and a basic one (it's been way too long a day!).

At the moment clicking Update / View Client loads a php file on to the page without refreshing. Which is great but what's the easiest way so that clicking the same anchor tag acts more like a toggle (show/hide)?

The jQuery:

 $("#searchClient").bind("click", function() {

              $("#search").load("inc/search.php?r=clients")

         });

The HTML:

<a href="#" id="searchClient"><h3>Update / View Existing Client</h3></a>
<div id="search"></div>

I don't want any fancy sliding just plain pop in pop out. Many thanks!

Upvotes: 0

Views: 884

Answers (1)

Jared Farrish
Jared Farrish

Reputation: 49208

Assuming the #search is hidden to begin with:

$("#searchClient").bind("click", function() {
    var $search = $("#search");

    if ($search.is(':hidden')) {
        $search.load("inc/search.php?r=clients", function () {
            $search.show();
        });
    } else {
        $search.hide();
    }
});

Otherwise you can track if it's been loaded:

$("#searchClient").bind("click", function() {
    var $search = $("#search");

    if ($search.is(':hidden')
        || $search.data('loaded') == undefined) {
        $search.load("inc/search.php?r=clients", function () {
            $search
                .data('loaded', true)
                .show();
        });
    } else {
        $search.hide();
    }
});

Upvotes: 1

Related Questions