CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3013745
user3013745

Reputation: 59

show div on click with Jquery

I want to show the div with id #flower when clicking on the link with id #button but it doesnt work. Heres is the code i wrote.. i made also a jsbin page to show you any suggestions?

http://jsbin.com/xefanaji/3/

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>


    <div id="front">
      <div><p><a href="">Button</a></p></div>
    </div>
    <div id="flower">
        <img src="http://2.bp.blogspot.com/-Gaz8V9dP5O0/UUjtKJPofuI/AAAAAAAALDQ/boET2Ns34aU/s320/blooming-flowers-35.jpg" alt="flower"/>

    </div>
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
    $(document).ready(
    function(){
        $("#button").click(function () {
            $("#flower").show("slow");
        });

    });
    </script>

</body>
</html>

css

#button{
  position:relative;
  height:30px;
  width:60px;
  background-color:lightyellow;
  left:40px;
  top:40px;
}
       #flower{

          display:none;
          position:relative;
          top:-600px;
          left:50px;
          z-index:0;
        }

      #front {
          z-index:1;
          position:relative;
          top:100px;
          height:600px;
          width:100%;
          background-color:lightblue;   
        }

Upvotes: 0

Views: 7092

Answers (5)

Milan and Friends
Milan and Friends

Reputation: 5610

Put the jQuery library in the head section of your document like below

<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>

If you need button you can use span instead of anchor e.g.

<span class="button">Button</span>

then add a little styling

.button {
  font-size: 12px;
  color: #333;
}
.button:hover {
  color: #ddd;
}

and then put this script just before </body> tag

<script>
  $(function() {
    $(".button").click(function () {
      $("#flower").show("slow");
    });
  });
</script>

Upvotes: 1

bipen
bipen

Reputation: 36551

if i am not wrong.. you need to add id to your button ,if (<a ..>Button</a>) is the element you are talking about.

<div><p><a href="#" id="button">Button</a></p></div>
                 //-^^^^^^^^^^----here


 $("#button").click(function (e) {
        e.preventDefault();
        $("#flower").show("slow");
    });

with CSS you have, i am sure you forget to add id to that a link

well few more thing,

always load script in your <head> section, and you don't need to add src in script tag

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   ..
   <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
....
....

<script>
 $(document).ready(
function(){
    $("#button").click(function () {
        $("#flower").show("slow");
    });

});
</script>

Upvotes: 2

Sridhar R
Sridhar R

Reputation: 20428

Try this

<div id="front">
      <div><p><a id="button" href="">Button</a></p></div>
    </div>
    <div id="flower">
        <img src="http://2.bp.blogspot.com/-Gaz8V9dP5O0/UUjtKJPofuI/AAAAAAAALDQ/boET2Ns34aU/s320/blooming-flowers-35.jpg" alt="flower"/>

    </div>
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
    $(document).ready(
    function(){
        $("#button").click(function (e) {
            e.preventDefault();
            $("#flower").show("slow");
        });

    });
    </script>

DEMO

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85653

You are missing id #button for that link.

<a id="button" href="">Button</a>

Upvotes: 0

SW4
SW4

Reputation: 71240

You could use the revised jQuery below to accomplish this, the reason your code isnt working is because your link doesnt have the id button set.

$('#front a:first').on('click',function(e){
  e.preventDefault();
  $('#flower').show();

})

Upvotes: 0

Related Questions