Div Transition With Javascript

Question

I'm new to html and javascript. Some days back someone provided me with javascript which basically opens a hidden DIV and when other DIV is opened, the first DIV which was opened will close automatically. But now I'm having another problem which does not allow me to have a transition effect. I want a transition within this code. Please help!!!

Here is the JAVASCRIPT:

var divs = ["div1", "div2", "div3", "div4", "div5", "div6", "div7", "div8"];
var visibleDivId = null;

function toggleVisibility(divId) {

    if (visibleDivId === divId) {
        visibleDivId = null;
    } else {
        visibleDivId = divId;
    }
    hideNonVisibleDivs();
}

function hideNonVisibleDivs() {
    var i, divId, div;
    for (i = 0; i < divs.length; i++) {
        divId = divs[i];
        div = document.getElementById(divId);
        if (visibleDivId === divId) {

            div.style.display = "block";

        } else {
            div.style.display = "none";
        }
    }
}

And the HTML goes something like this:

<div id="div1" onClick="toggleVisibility('div1');return false;">
<div id="div2" onClick="toggleVisibility('div2');return false;">

and so on.

I have tried every possible way I could find, but there is no perfect way of achieving the effect. I want the div to be hidden and when the navigation is clicked, the div should open with its contents inside with a transition. Thank you :)

The best way to achieve this is using CSS transitions on the divs. — TylerH
– TylerH, Commented Mar 4, 2014 at 17:11
please send me a code. and i want to achieve the effect with the javascript which i provided. as making a new javascript will make me undo all the progress i have done so far. if possible please include a javascript code with in the code i already provided. than you :) — user3380047
– user3380047, Commented Mar 4, 2014 at 17:14

TylerH · Accepted Answer · 2014-03-04 17:18:40Z

1

Try using CSS transitions. For example, this will give your divs a transition from collapsed to open over two seconds:

#div1 {
    transition: height 2s;
    -moz-transition: height 2s; /* Firefox 4 */
    -webkit-transition: height 2s; /* Safari and Chrome */
    -o-transition: height 2s; /* Opera */
}

I don't know JavaScript, but you will use it to hide the div by default, then on hover or click or whichever action you decide, have it display/hide the divs relative to their respective statuses.

answered Mar 4, 2014 at 17:18

TylerH

21.3k84 gold badges84 silver badges121 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jan Turoň · Accepted Answer · 2014-03-04 17:24:16Z

1

As TylerH noted in the comments, the best way is to use CSS transition:

#mydiv { transition: opacity 2s; }
.hidden { opacity: 0; }

the role of the javascript could be just toggle the class .hidden on the element you want to hide:

document.getElementById("mydiv").classList.toggle("hidden");

See working example on the fiddle

You can't achieve it by setting the display property, since there is no transition between none and block. You can iterate through all the divs like you do in your hideNonVisibleDivs() and put it together with the fiddle code.

edited Mar 4, 2014 at 17:24

answered Mar 4, 2014 at 17:19

Jan Turoň

33.1k24 gold badges139 silver badges179 bronze badges

Comments

Geoffrey-ap · Accepted Answer · 2014-03-04 17:19:57Z

0

you can use Jquery animate

<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> <--- this will add Jquery

$("div").onclick(function(){
  $(this.attr("id")).fadeIn(1000); <--- this is the animation
});

or if you want you can use the animate function

https://api.jquery.com/animate/

answered Mar 4, 2014 at 17:19

Geoffrey-ap

3803 silver badges13 bronze badges

2 Comments

user3380047 Over a year ago

please provide a solution for the current javascript i gave. thank you

Geoffrey-ap Over a year ago

just change div.style.display = "block"; to div.fadeIn(1000); and div.style.display = "none"; to div.fadeOut(1000); ...... its the same solution.

Collectives™ on Stack Overflow

Div Transition With Javascript

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related