CODEWITHSUNDEEP
jquery
TAR
TAR

Reputation: 171

JQuery Hide div not working

I have a div which I am trying to hide with a JQuery function;

function hideDiv() {

        $('SearchDiv').hide()
    }

This refers to the button;

<input type="button" style="width:170px; float:right;" value="Search" OnClick="hideDiv()"/>

The div looks like this;

<div id="SearchDiv"  style=" border-bottom: 1px; border-style: solid; border-color: darkgrey; background-color: #F3F3F4; width: 100%; color: #4a3c8c; font-family: Verdana; font-size: 9pt;">TEST</div>

I have tried using the client ID, changing the button to an asp:button and still have no luck in showing the div! I have also looked through the forums here without finding anything that works for me.

Any help with this would be greatly appreciated!

Upvotes: 0

Views: 2924

Answers (2)

Rohil_PHPBeginner
Rohil_PHPBeginner

Reputation: 6080

You are missing selector after adding selector it works fine.

See snippest.

function hideDiv() {

        $('#SearchDiv').hide()
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="SearchDiv"  style=" border-bottom: 1px; border-style: solid; border-color: darkgrey; background-color: #F3F3F4; width: 100%; color: #4a3c8c; font-family: Verdana; font-size: 9pt;">TEST</div>
<input type="button" style="width:170px; float:right;" value="Search" OnClick="hideDiv()"/>

Upvotes: -1

Benjamin Gruenbaum
Benjamin Gruenbaum

Reputation: 276266

You're selecting elements of type SearchDiv where you should be selecting elements with ID SearchDiv:

$("#SearchDiv").hide();

See the documentation for the ID selector for more details.

Also, consider attaching the event in your code (so it still logically functions with JS disabled and to not mix concerns), this would remove the OnClick part and look like this:

// be sure to put the script tag at the end of your body section.
$("#SearchDiv").click(function(){
     $(this).hide();
});

It's also best practice to keep CSS in CSS files (and not inline) (or at least in a style tag), it'll improve performance and allow tweaking from the outside.

Upvotes: 4

Related Questions