CODEWITHSUNDEEP
javascriptjquery
acl77
acl77

Reputation: 341

display div dynamically on click

I'm basically trying to replicate what you get on google images with a div appearing from an onClick event directly below the row of images containing the anchor that is clicked. I've found code for the show and hide methods which is pretty easy, as per below:

$(document).ready(function(){

  $("#hide").click(function(){
    $("#imageBox").hide("slow");
  });

  $('a').click(function(){
    $("#imageBox").show("slow");
    document.getElementById("displayImage").innerHTML = '<img src = "images/profiles/male-silhouette.jpg" style="margin:20px;" />';
  });

});

However I can't get around the div appearing wherever I place it in the HTML. For instance, in the code below the div with image and text will obviously always appear between the first and second lists, in the same place:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
 <div id="imageBox">
  <button id="hide" class="hButton">X Close</button>
  <p id="displayImage">&nbsp;</p>
 </div>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

After searching on Google and Stack Overflow I've not even come close to learning how to do this. Can anyone point to some open source code or a tutorial?

Upvotes: 0

Views: 2201

Answers (3)

Sajad Karuthedath
Sajad Karuthedath

Reputation: 15767

You have the placed the document.getElementById("displayImage").innerHTML in the $('a').click(function () { where there is no anchor tag at all in the markup.. put the code inside the document.ready 

$(document).ready(function () {

    $("#hide").click(function () {
        $("#imageBox").hide("slow");
    });
    document.getElementById("displayImage").innerHTML = '<img src = "http://www.clipartbest.com/cliparts/7Ta/MBz/7TaMBzMqc.png" width="30px" height="30px" style="margin:20px;" />';
    $('a').click(function () {
        $("#imageBox").show("slow");

    });

});

DEMO FIDDLE

NOTE: can't understand your $('a').click(function () { as i can't see any anchor tags in the markup.

Change after your comment:

$(document).ready(function () {
    $("#imageBox").hide();
    $("#hide").click(function () {
        $("#imageBox").hide("slow");
    });

    $('a').click(function () {
        $("#imageBox").show("slow");
        document.getElementById("displayImage").innerHTML = '<img src = "http://www.clipartbest.com/cliparts/7Ta/MBz/7TaMBzMqc.png" width="30px" height="30px" style="margin:20px;" />';

    });

});

UPDATED FIDDLE

Upvotes: 0

Guillermo Nahuel Varelli
Guillermo Nahuel Varelli

Reputation: 318

you can try 

 $('button funtion').on('click', function(event) {

            $('sample1').className;
            $('sample1').removeClassName('hidden');
            $('sample1').className;

            $('sample2').className;
            $('sample2').addClassName('hidden');
            $('sample2').className;

        });

attribute hide must be created in css

hidden {
visibility: hidden;

}

or you can searh for toogle class, this method invert the property 

$("button").click(function(){

$("p").toggleClass("hidden"); });

Upvotes: 0

MrE
MrE

Reputation: 20768

jQuery is used to select elements and apply CSS to them and much more. You can learn a lot about jQuery on their website: http://api.jquery.com/id-selector/

The CSS is what provides the animation, with 'transitions'. a box opening would change size (height for example) and you'd want to put a transition tag on the height property in the CSS of the particular div.

http://css3.bradshawenterprises.com/transitions/

To learn jQuery, CSS, HTML and all, I recommend starting with W3Schools: http://www.w3schools.com/default.asp

http://www.w3schools.com/css/css3_intro.asp http://www.w3schools.com/jquery/default.asp

Upvotes: 1

Related Questions