jquery ui slide toggle in simple javascript

Question

i have to code jquery ui slide toggle in simple javascript...

<center>
<button id="button" class="myButton">Read More</button>
</center>

<div id="myDiv">
<p>Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom. Cool Read More Content Here. Lorem Ipsom.</p>
</div>


$(".myButton").click(function () {
    var self = $(this);
    // Set the effect type
    var effect = 'slide';

    // Set the options for the effect type chosen
    var options = { direction: $('left').val() };

    // Set the duration (default: 400 milliseconds)
    var duration = 1000;

    $('#myDiv').toggle(effect, options, duration, function() {
        if (self.text() == "Read More") {
            self.text('Read Less');
        } else {
            self.text('Read More');
        }
    });
});

I have to code same functionality using plain JavaScript any one implemented please help Thanks in Advance

I copy and paste your code into JSFiddle and I don't see any animation at all.. So, your goal is to change the above code into plain JS or create slideToggle without using it ? — Bla...
– Bla..., Commented Aug 26, 2014 at 2:07

Community · Accepted Answer · 2017-05-23 10:30:04Z

May be this code might help:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <div >
            <div id="test" style="height: 150px; width: 100px; background-color: yellowgreen; display:none">block</div>
        </div>
        <div>&nbsp;</div>
        <div onclick="slideUp(document.getElementById('test'));" style="cursor:pointer;">slide Up</div>
        <div>&nbsp;</div>
        <div onclick="slideDown(document.getElementById('test'))" style="cursor:pointer;">slide down</div>
        <script>
            function slideDown(obj, speed) {
                var mySpeed = speed || 300;
                var intervals = mySpeed / 30; // we are using 30 ms intervals
                //alert('intervals = ' + intervals);
                var holder = document.createElement('div');//
                var parent = obj.parentNode;
                holder.setAttribute('style', 'height: 0px; overflow:hidden');
                parent.insertBefore(holder, obj);
                parent.removeChild(obj);
                holder.appendChild(obj);
                obj.style.display = obj.getAttribute("data-original-display") || "";
                var height = obj.offsetHeight;
                var sepHeight = height / intervals;
                //  alert(sepHeight)
                var timer = setInterval(function() {
                    var holderHeight = holder.offsetHeight;
                    if (holderHeight + sepHeight < height) {
                        holder.style.height = (holderHeight + sepHeight) + 'px';
                    } else {
                        // clean up
                        holder.removeChild(obj);
                        parent.insertBefore(obj, holder);
                        parent.removeChild(holder);
                        clearInterval(timer);
                    }
                }, 30);
            }

            function slideUp(obj, speed) {
                var mySpeed = speed || 300;
                var intervals = mySpeed / 30; // we are using 30 ms intervals
                var height = obj.offsetHeight;
                var holder = document.createElement('div');//
                var parent = obj.parentNode;
                holder.setAttribute('style', 'height: ' + height + 'px; overflow:hidden');
                parent.insertBefore(holder, obj);
                parent.removeChild(obj);
                holder.appendChild(obj);
                var originalDisplay = (obj.style.display !== 'none') ? obj.style.display : '';
                obj.setAttribute("data-original-display", originalDisplay);
                var sepHeight = height / intervals;
                //  alert(sepHeight)
                var timer = setInterval(function() {
                    var holderHeight = holder.offsetHeight;
                    console.log(holderHeight);
                    if (holderHeight - sepHeight > 0) {
                        holder.style.height = (holderHeight - sepHeight) + 'px';
                    } else {
                        // clean up
                        obj.style.display = 'none';
                        holder.removeChild(obj);
                        parent.insertBefore(obj, holder);
                        parent.removeChild(holder);
                        clearInterval(timer);
                    }
                }
                , 30);
            }

        </script>
    </body>
</html>

References :: Here.. You can find other answers too

Collectives™ on Stack Overflow

jquery ui slide toggle in simple javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related