CODEWITHSUNDEEP
javascriptanimationhtmlshow-hide
Simulator88
Simulator88

Reputation: 637

Show hide div with animation

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?

Upvotes: 13

Views: 91061

Answers (7)

Alan Wells
Alan Wells

Reputation: 31300

This example will toggle multiple elements with the same class name. This example does not need jquery.

HTML:

<button onclick="fadeInAndOut(this)" style="width:100%">Toggle 1</button>
<div class="accordianPanel acordianPanelHidden accordianPanelStyle">Panel 1</div>

<button onclick="fadeInAndOut(this)" style="width:100%">Toggle 2</button>
<div class="accordianPanel acordianPanelHidden accordianPanelStyle">Panel 2</div>

Javascript:

function fadeInAndOut(thz) {
  var elmt = thz.nextElementSibling;//Get the element that is below the button that
     //was just clicked

  elmt.classList.toggle("acordianPanelHidden");//Toggle the class which changes
    //attributes which triggers the `transition` CSS
}

CSS

.accordianPanel {
  opacity: 1;
  height:100%;
  transition: all 1s;
}

.accordianPanel.acordianPanelHidden {
  opacity: 0;
  height: 0px;
  visibility:hidden;/* This must be used or some strange things happen - 
   What happens is that even though the content of the panel is not shown 
   any buttons in the content can still be clicked -
   So basically there are invisible buttons that can accidently get clicked -
   if the visibility is not set to hidden - And the visibility doesn't need to be explicitly changed to visible
  from hidden in order to show the content
  because if visibility:hidden is not used then by default the content is 
  displayed -
 */
}

.acordianPanelShown {
  height: 100%;
  width: 100%;
  opacity: 1;
}

.accordianPanelStyle {
  background:red;
}

Upvotes: 2

Saju
Saju

Reputation: 3257

If You are using Jquery then another way to do this is

    function showhide(id) {
      $(".hideable").fadeOut("slow");
      $("#" + id).fadeIn("slow");
    }

Assuming "hideable" as className in your group of divs

Good luck.

Upvotes: 2

Arun Kasyakar
Arun Kasyakar

Reputation: 915

You can use slideDown() and slidUp() of jQuery

$( document.body ).click(function () {
  if ( $( "div:first" ).is( ":hidden" ) ) {
    $( "div" ).slideDown( "slow" );
  } else {
    $( "div" ).slideUp("slow");
  }
});

Upvotes: 3

codedude
codedude

Reputation: 59

This is way easier with only CSS.

You make a class

div {
 display:block;
 transition: all .2s ease-out;
}

.hidden {
 display:none;
}

And with javascript, you apply or remove the class hidden when you want to. jQuery animation lib is wayyyy far from good to be used. It's clunky, and ressource eating for your user. CSS works with your GPU instead, allowing a more fluid animation.

Upvotes: 1

yogi
yogi

Reputation: 19591

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.

Upvotes: 6

imVJ
imVJ

Reputation: 424

This will surely solve your problem.

You can use .fadeOut() directly if you have included jQuery library in your script.

Upvotes: 1

Felipe Fonseca
Felipe Fonseca

Reputation: 1129

You can do that using a Library like jQuery or something.

You can sure make it using plain javascript, but there's no point doing that since jQuery is an amazing library.

See some examples of show and hide

Upvotes: -1

Related Questions