Question

167

Show hide div with animation

rated 0 times [ 169] [ 2] / answers: 1 / hits: 86693 / 12 Years ago, tue, january 15, 2013, 12:00:00

I made this script, which opens a div with the right class and close the others.

function showhide(id) {

    if (document.getElementById) {

        var divid = document.getElementById(id);

        var divs = document.getElementsByClassName(hideable);

        for (var i = 0; i < divs.length; i = i + 1) {

            divs[i].style.display = none;

        }

        divid.style.display = block;

    }

    return false;

}

Is it possible to make some animation, like fadout, easeout instead of just showing it by display options?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

maxinec

Add To Favorites

Follow

Total Points: 117

Total Questions: 116

Total Answers: 116

Location: Bangladesh

Member since Sat, Jan 23, 2021

3 Years ago

answered 12 Years ago kenyamelinad · Accepted Answer

You could try this

function showhide(id) {

  if (document.getElementById) {

    var divid = document.getElementById(id);

    var divs = document.getElementsByClassName(hideable);

    for (var i = 0; i < divs.length; i = i + 1) {

      $(divs[i]).fadeOut(slow);

    }

    $(divid).fadeIn(slow);

  }

  return false;

}

Have a look at this fiddle http://jsfiddle.net/9jtd3/

There are many more techniques provided by Jquery library, You should have a look at that too.