CODEWITHSUNDEEP
javascriptjqueryhtml
ismy0031
ismy0031

Reputation: 23

Simple Javascript not working to hide div

I am trying to learn a little bit of java script, an any help would be greatly appreciated as I am pretty new to this world and just learning. I have tried looking up and down this site and have tried several suggestions from other users but none really seem to answer my issue.

I have this bit of code:

Im simply trying to get it to slowly hide a div box when the x is clicked. the button shows up and can be clicked but nothing happens. can someone help me out and show me what I'm doing wrong?

<div id="daily_deal">
    <button id="close_x" onclick="myFunction($)"><img src="/assets/templates/blacbold_TEST/images/red_x.png" /></button>
    <div id="widget"><iframe src="dailydeal_widget.asp" scrolling="no" frameborder="0"     style="border:none; overflow:hidden; width:155px; height:355px;" allowtransparency="true"></iframe></div>


  function myFunction($) {
      $(document).ready(function() {
          $("#close_x").click(function () {
              $("#widget").slideToggle("slow");
          });
      });
  })(jQuery);

Upvotes: 2

Views: 116

Answers (6)

kaushik0033
kaushik0033

Reputation: 677

you can try this function for hide and show div tag:

$(document).ready(function(){

    $(".productDescription").hide();
    $(".show_hide").show();

$('.show_hide').click(function(){
$(".productDescription").slideToggle();
return false;
});

});

Like HtmL Code:

<a href="#" class="show_hide">See Full Description</a>
<div class="productDescription">
  <p>This very large bath bomb will fizz up to two minutes, how good is that. Drizzled   with soap it looks so authentic. This cake slice has a scent of Tropical Fruit including   Pineapple, Mango & Grapefruit and you'll be surrounded by gorgeous flowers and glitter.   <a  href="#" class="show_hide">Hide</a></p></div>

Upvotes: 0

Anil kumar
Anil kumar

Reputation: 4177

No need to call function in onclick, so your resultant html should be like this.

<button id="close_x"><img src="/assets/templates/blacbold_TEST/images/red_x.png" /></button>

And your script should be

 $(document).ready(function() {
          $("#close_x").click(function () {
              $("#widget").slideToggle("slow");
          });
      });

Upvotes: 0

Philip Giuliani
Philip Giuliani

Reputation: 1366

You only need this code:

$(document).ready(function() {
      $("#close_x").on("click", function () {
          $("#widget").slideToggle("slow");
      });
  });

the onclick="myFunction($)" is not neccessary anymore.

Upvotes: 0

stafffan
stafffan

Reputation: 492

You can remove the $(document).ready() row. That is, remove line 2 and 6 from your function. It's implying that you want to do something when page has loaded, which will not occur at the same time as this function is called.

Upvotes: 0

Roy Dictus
Roy Dictus

Reputation: 33139

Use

<button id="close_x" onclick="toggleWidget();">

and

function toggleWidget() {
    $("#widget").slideToggle("slow");
}

Upvotes: 0

Richard Dalton
Richard Dalton

Reputation: 35793

You only need this bit:

$(document).ready(function() {
      $("#close_x").click(function () {
          $("#widget").slideToggle("slow");
      });
  });

And then you can remove the onclick from the button:

<button id="close_x"><img src="/assets/templates/blacbold_TEST/images/red_x.png" /></button>

What it was doing is binding to the document ready event when you clicked the button, but as this has already happened the code that binds the click event is never run.

Upvotes: 3

Related Questions