how to do show/hide div with slide in Javascript (without jQuery)

Question

how to do show/hide div with slide from left to right in Javascript (without jQuery)

this is example for what i need (in jQuery): http://jsfiddle.net/dRpWv/1/

this is the example source of what i need in jQuery:

<a href="#" id="button" class="button_style">Show content</a>
<div id="hidden_content">Content</div>

<script>
$(document).ready(function() {
    $("#button").toggle(function() {
        $(this).text('Hide Content');
    }, function() {
        $(this).text('show Content');
    }).click(function(){
        $("#hidden_content").slideToggle("slow");
    });
});
</script>

look at css transitions developer.mozilla.org/en-US/docs/Web/Guide/CSS/… — Chris Moutray
– Chris Moutray, Commented May 10, 2014 at 11:36

Niet the Dark Absol · Accepted Answer · 2014-05-10 11:36:18Z

7

http://jsfiddle.net/dRpWv/665/

Here ya go. Makes use of CSS3 transition to smoothly animate the slide (much more smoothly than jQuery could ever manage, I might add).

Since display is not transitionable, it uses height instead with overflow:hidden (which is how jQuery does it internally, I think). Uses scrollHeight to determine target height.

answered May 10, 2014 at 11:36

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

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

Comments

roy · Accepted Answer · 2014-05-10 12:19:21Z

1

had to try it myself, not even close to Jquery but working :) http://jsfiddle.net/6MTma/

   function slideToggle() {
       var content = document.getElementById('hidden_content');
       var style = window.getComputedStyle(content);

       style['display'] == 'none' ? slideDown(content) : slideUp(content)
   }
   var btn = document.getElementById('button');
   btn.addEventListener('click', function(){
       slideToggle();
   })

answered May 10, 2014 at 12:19

roy

6056 silver badges14 bronze badges

Comments

Jelle Smeets · Accepted Answer · 2014-05-10 11:34:28Z

-1

You can use this to hide your element:

document.getElementById("MyElement").style.display = "none";

To show an element you can set the display to block:

 document.getElementById("MyElement").style.display = "block";

answered May 10, 2014 at 11:34

Jelle Smeets

1584 silver badges11 bronze badges

1 Comment

Ejaz Over a year ago

how to do show/hide div with slide from left to right display: block/none simply shows/hides the element. \

fjc · Accepted Answer · 2014-05-10 11:35:30Z

-1

Just use a normal onclick handler and store a variable with the current state (displayed/hidden):

var displayed = true;
document.getElementById("button").onclick = function() {
    displayed = !displayed; // the toggle part
    if(displayed) {
        document.getElementById("button").innerHTML = "Show content";
    } else {
        document.getElementById("button").innerHTML = "Hide content";
    }
    // perform general onclick action that's unrelated to toggle, e.g. using a CSS3 transition to slide
};

You'll find out how to slide stuff easily by using Google.

answered May 10, 2014 at 11:35

fjc

5,85521 silver badges38 bronze badges

Comments

saj1991 · Accepted Answer · 2015-04-25 14:50:06Z

-1

if button with toggle class by click that button will shows the div by incresing its width...(toggle)

<script>
var $block = $( ".block" );
$block.hide();
$( "#toggle" ).on( "click", function() {
$block.stop().slideToggle(1000 );
 $( ".block" ).animate({
width: "700px",
borderWidth: "10px"
}, 1500 );


});
<script>

answered Apr 25, 2015 at 14:50

saj1991

193 bronze badges

Collectives™ on Stack Overflow

how to do show/hide div with slide in Javascript (without jQuery)

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related