Pls help me how to open div smoothly.I have add script and html code, its working perfectly but div open suddenly with jerk. I want to open my div "#mapsec" smoothly.

function showhide() {
    var div = document.getElementById("mapsec");
    if (div.style.display !== "none") {
        div.style.display = "none";
    }
    else {
        div.style.display = "block";

    }
}

HTML CODE

<h3>Visit us (<i><a onclick="showhide()" id="scrollmap" class="mapimg" style="cursor: pointer;">Map</a></i>)</h3>

<div id="mapsec" style="display: none; clear: both;">
    <img
        src=".jpg"
        alt="map-img" width="1245" height="350"
        class="alignnone size-full wp-image-4586" />
</div>

Pls help me how to open div smoothly.I have add script and html code, its working perfectly but div open suddenly with jerk. I want to open my div "#mapsec" smoothly.

function showhide() {
    var div = document.getElementById("mapsec");
    if (div.style.display !== "none") {
        div.style.display = "none";
    }
    else {
        div.style.display = "block";

    }
}

HTML CODE

<h3>Visit us (<i><a onclick="showhide()" id="scrollmap" class="mapimg" style="cursor: pointer;">Map</a></i>)</h3>

<div id="mapsec" style="display: none; clear: both;">
    <img
        src="http://www.websitesnmore..au/wp-content/uploads/2013/06/map-img.jpg"
        alt="map-img" width="1245" height="350"
        class="alignnone size-full wp-image-4586" />
</div>

• javascript
• jquery

• 1 use css3 transitions instead of jQuery/Javascript animation – user2009750 Commented Jan 30, 2015 at 13:09

5 Answers 5

You have several ways to do it with jQuery. For example:

function showhide() {

    $('#mapsec').slideToggle(200);
}

This will slide the div open or closed. 200 is the speed of the animation in miliseconds.

Check these out:

1. $('#mapsec').toggle(200); — jQuery.toggle()
2. $('#mapsec').slideToggle(200); — jQuery.slideToggle()
3. $('#mapsec').fadeToggle(200); — jQuery.fadeToggle()

Using display does exactly what it says it does: displayor hide elements. You could use jQuerys hide and show functions, but since you are trying to use standard javascript, I'll hand you another solution:

<div id="mapsec">
<!-- Your Contents -->
</div>

Now your CSS:

#mapsec { 
    max-height: 0; 
    overflow: hidden; 
    /* You should prefix the following: */
    transition: max-height 500ms;
}
#mapsec.active {
    /* Depending on this value, your animatiom will seem faster or shorter */
    max-height: 1000px;
}

Now the javascript:

function showhide(){
    var div = document.getElementById("mapsec");
    if (div.className === "") {
        div.className = "active";
    } else {
        div.className = "";
    }
}

What we are using is CSS3's built-in animations to trigger something that looks smoother. We hide the overflow of the box you want to animate - as you want it to be invisible. Then we also set it max-height to 0, so it will appear to have no height whatsoever (I would like to add that any paddings and margins don't get included here and might need to be reset as well).

Now we simple add the active class to the div to animate it.

Heres an improved, more universal, and reusable version of the CSS and javascript:

<div id="mapsec" class="hidden">
<!-- Your Contents -->
</div>

.hidden { 
    max-height: 0; 
    overflow: hidden; 
    transition: max-height 500ms;
}
.hidden.active {
    max-height: 1000px;
}

function showhide(id){
    var div = document.getElementById(id);
    if (div.className === "hidden") {
        div.className = "hidden  active";
    } else {
        div.className = "hidden";
    }
}

Now you can add hidden to any box and unhide it by doing <a href="#" onclick="showHide('id'); return false;">Unhide</a>(replacing 'id' with the id of the element you want to show).

If you want to use jQuery, we can make it even better and easier (and robuster) by using something jQuery has built-in:

<a href="#" onclick="$('#mapsec').toggleClass('active'); return false;">Unhide</a>

Now the toggleClass will add the active class and remove it by itself! This is better, as when you use multiple classes, jQuery will leave them intact (notice we don't actually have to use hidden in this code anymore? As long as it already has hidden, we can leave it alone.)

function showhide(id){
    var div = document.getElementById(id);
    if (div.className === "hidden") {
        div.className = "hidden  active";
    } else {
        div.className = "hidden";
    }
}

.hidden { 
    max-height: 0; 
    overflow: hidden; 
    /* You should prefix the following: */
    transition: max-height 500ms;
}
.hidden.active {
    max-height: 1000px;
}

<div id="mapsec" class="hidden">
   <img src="" width="200" height="200" />
</div>
<a href="javascript:showhide('mapsec')">ShowHide</a>

Use jQuery.toggle():

function showhide() {
    $('#mapsec').toggle();
}

$( "#mapsec" ).show( "slow" );

This should ease the div in nicely instead of:

div.style.display = "block";

I would mainly agree with somethinghere, but since you animate a div with an image inside, than I would animate height of div and set the image height to 100%. Think that looks better/smoother Fiddle. JS changing class is from the answer, but CSS is:

#mapsec {
    height: 0;
    overflow: hidden;
    -webkit-transition: height 500ms;
    transition: height 500ms;
}
#mapsec.active {
    height: 200px;
}
#mapsec img {
    height: 100%;
    width: 100%;
}