locked
Slidetoggle RRS feed

  • Question

  • User702049738 posted

    Hello Experts;

    I was wondering if you can help me create a slide toggle that is purely JavaScript. I do not want any jquery. 

    this is what i have so far. this is gotten from one of the posting on stackoverflow but it is not complete and hence doesn't work well in internet explorer 11

    css

            #mdiv {

        height: 120px;

        width: 200px;

        margin-top: 20px;

        background-color: green;

        color: white;

        font-size: 20px;

        font-weight: bold;

        text-align: center;

    }

    html

          

            <button id="mbtn" onclick="slideToggle()">SlideToggle</button>

    <div id="mdiv">Some context</div>

        var open = true;
            var heightChecked = false;
            var initHeight = 0;
            var intval = null;
    
            function slideToggle() {
                window.clearInterval(intval);
                var mdiv = document.getElementById('mdiv');
                if (!heightChecked) {
                    initHeight = mdiv.offsetHeight;
                    heightChecked = true;
                }
                if (open) {
                    var h = initHeight;
                    open = false;
                    intval = setInterval(function () {
                        h--;
                        mdiv.style.height = h + 'px';
                        if (h <= 0)
                            window.clearInterval(intval);
                    }, 1
                    );
                }
                else {
                    var h = 0;
                    open = true;
                    intval = setInterval(function () {
                        h++;
                        mdiv.style.height = h + 'px';
                        if (h >= initHeight)
                            window.clearInterval(intval);
                    }, 1
                    );
                }
            }

    Thanks in advance

    Monday, November 20, 2017 4:44 PM

Answers

  • User702049738 posted

    the problem was the form..do not put the javascript code in the form tag...see full code below

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="Default5" %>

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head runat="server">

        <title></title>

     

           <style>

                #mdiv

                {

                    height: 120px;

                    width: 200px;

                    margin-top: 20px;

                    background-color: green;

                    color: white;

                    font-size: 20px;

                    font-weight: bold;

                    text-align:center;

                }

        </style>

    </head>

    <body>

     

        <button  onclick="slideToggle()">SlideToggle</button>

    <div id="mdiv">Some context</div>

      

                 <form id="form1" runat="server">

                </form>

        <script type ="text/javascript">

         

            var open = true;

            var heightChecked = false;

            var initHeight = 0;

            var intval = null;

            function slideToggle()

            {

              

                window.clearInterval(intval);

                var mdiv = document.getElementById('mdiv');

                if (!heightChecked) {

                    initHeight = mdiv.offsetHeight;

                    heightChecked = true;

                }

                if (open) {

                    var h = initHeight;

                    open = false;

                    intval = setInterval(function () {

                        h--;

                        mdiv.style.height = h + 'px';

                        if (h <= 0)

                            window.clearInterval(intval);

                    }, 1

                    );

                }

                else {

                    var h = 0;

                    open = true;

                    intval = setInterval(function () {

                        h++;

                        mdiv.style.height = h + 'px';

                        if (h >= initHeight)

                            window.clearInterval(intval);

                    }, 1

                    );

                }

               

            }

           

           

              

        </script>

     

    </body>

    </html>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, November 22, 2017 8:17 PM

All replies

  • User-1838255255 posted

    Hi olybobo,

    Through your description and needs, i found a sample, i have modify and tested it in my side(Chrome and IE 11), it works perfect. Please check:

    Sample Code:

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>slideToggler Demo</title>
        <style>
            body {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                min-height: 100vh;
                -ms-flex-pack: distribute;
                justify-content: space-around;
                -webkit-box-align: start;
                -ms-flex-align: start;
                align-items: flex-start;
                background: -webkit-linear-gradient(left bottom, #000000, #e5008d, #ff070b);
                background: linear-gradient(to right top, #000000, #e5008d, #ff070b);
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                font-family: "Titillium Web", sans-serif;
            }
    
            .container {
                text-align: center;
                margin: 150px;
                -webkit-box-flex: 1;
                -ms-flex: 1;
                flex: 1;
            }
    
            button {
                background: black;
                border: black;
                width: 100%;
                color: white;
                border-radius: 0.125em;
                font: inherit;
                padding: 0.75em 1em;
                text-transform: uppercase;
                letter-spacing: 0.1em;
                box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
            }
    
            .block {
                background: black;
                box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
                text-align: left;
                font-size: 1.25em;
                color: white;
                list-style-type: none;
                overflow: hidden;
                padding: 0;
                white-space: nowrap;
                letter-spacing: 0.1em;
            }
    
                .block.with-padding {
                    padding: 5em 0;
                }
    
                .block.with-border {
                    border-top: 1px solid magenta;
                    border-bottom: 2px solid magenta;
                }
    
                .block.hidden {
                    display: none;
                }
    
                .block li {
                    padding: 1em 0.5em;
                    margin: 0 1em;
                }
    
                    .block li + li {
                        border-top: 1px solid white;
                    }
        </style>
    </head>
    
    <body>
        <div class="container">
            <h1>slideToggler Demo</h1>
            <button>Toggle</button>
            <ul class="block with-border hidden">
                <li>One</li>
                <li>Two</li>
                <li>Three</li>
                <li>Four</li>
            </ul>
        </div>
        <script>
            (function () {
                var block, i, j, len, len1, ref, ref1, slideToggler, trigger,
                  bind = function (fn, me) { return function () { return fn.apply(me, arguments); }; },
                  indexOf = [].indexOf || function (item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
    
                slideToggler = (function () {
                    function slideToggler(el1) {
                        this.el = el1;
                        this.toggle = bind(this.toggle, this);
                        if (!this.el) {
                            return;
                        }
                        this.height = this.getHeight();
                    }
    
                    slideToggler.prototype.getHeight = function () {
                        var clone;
                        if (this.el.clientHeight > 10) {
                            return this.el.clientHeight;
                        }
                        clone = this.el.cloneNode(true);
                        clone.style.cssText = '; visibility: hidden; display: block;';
                        this.el.parentNode.appendChild(clone);
                        this.height = clone.clientHeight;
                        this.el.parentNode.removeChild(clone);
                        return this.height;
                    };
    
                    slideToggler.prototype.toggle = function (time) {
                        var currHeight, disp, el, end, init, ref, repeat, start;
                        if (!(this.height > 0)) {
                            this.height = this.getHeight();
                        }
                        if (time == null) {
                            time = this.height;
                        }
                        currHeight = this.el.clientHeight * (getComputedStyle(this.el).display !== 'none');
                        ref = currHeight > this.height / 2 ? [this.height, 0] : [0, this.height], start = ref[0], end = ref[1];
                        disp = end - start;
                        el = this.el;
                        this.el.classList[end === 0 ? 'remove' : 'add']('open');
                        this.el.style.cssText = "overflow: hidden; display: block; padding-top: 0; padding-bottom: 0";
                        init = (new Date).getTime();
                        repeat = function () {
                            var i, instance, ref1, repeatLoop, results, step;
                            instance = (new Date).getTime() - init;
                            step = start + disp * instance / time;
                            if (instance <= time) {
                                el.style.height = step + 'px';
                            } else {
                                el.style.cssText = "display: " + (end === 0 ? 'none' : 'block');
                            }
                            repeatLoop = requestAnimationFrame(repeat);
                            if (ref1 = Math.floor(step), indexOf.call((function () {
                              results = [];
                              for (var i = start; start <= end ? i <= end : i >= end; start <= end ? i++ : i--) { results.push(i); }
                              return results;
                            }).apply(this), ref1) < 0) {
                                return cancelAnimationFrame(repeatLoop);
                            }
                        };
                        return repeat();
                    };
                    return slideToggler;
                })();
    
                ref = document.querySelectorAll('.block');
                for (i = 0, len = ref.length; i < len; i++) {
                    block = ref[i];
                    block.toggler = new slideToggler(block);
                }
    
                ref1 = document.querySelectorAll('button');
                for (j = 0, len1 = ref1.length; j < len1; j++) {
                    trigger = ref1[j];
                    trigger.addEventListener('click', function () {
                        var ref2;
                        return (ref2 = this.parentNode.querySelector('.block').toggler) != null ? ref2.toggle() : void 0;
                    });
                }
    
            }).call(this);
        </script>
    </body>

    Result:

    Best Regards,

    Eric Du 

    Tuesday, November 21, 2017 3:09 AM
  • User702049738 posted

    Hi Eric;

    the code unfortunately still doesn't work.

    Tuesday, November 21, 2017 2:42 PM
  • User-1838255255 posted

    Hi olybobo,,

    You say my code doesn't work, could you tell us where doesn't work? Also I hope you could check page code in browser-Press F12-Console Panel, check if meet some error message? which browser you use?

    I hope you could copy my code to test again in your side, because it works in my side.

    Best Regards,

    Eric Du  

    Wednesday, November 22, 2017 1:57 AM
  • User702049738 posted

    Well Eric;

    The problem is I have to click twice for it to show and it disappears immediately. It doesn't toggle as per say

    Wednesday, November 22, 2017 2:42 AM
  • User702049738 posted

    the problem was the form..do not put the javascript code in the form tag...see full code below

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="Default5" %>

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head runat="server">

        <title></title>

     

           <style>

                #mdiv

                {

                    height: 120px;

                    width: 200px;

                    margin-top: 20px;

                    background-color: green;

                    color: white;

                    font-size: 20px;

                    font-weight: bold;

                    text-align:center;

                }

        </style>

    </head>

    <body>

     

        <button  onclick="slideToggle()">SlideToggle</button>

    <div id="mdiv">Some context</div>

      

                 <form id="form1" runat="server">

                </form>

        <script type ="text/javascript">

         

            var open = true;

            var heightChecked = false;

            var initHeight = 0;

            var intval = null;

            function slideToggle()

            {

              

                window.clearInterval(intval);

                var mdiv = document.getElementById('mdiv');

                if (!heightChecked) {

                    initHeight = mdiv.offsetHeight;

                    heightChecked = true;

                }

                if (open) {

                    var h = initHeight;

                    open = false;

                    intval = setInterval(function () {

                        h--;

                        mdiv.style.height = h + 'px';

                        if (h <= 0)

                            window.clearInterval(intval);

                    }, 1

                    );

                }

                else {

                    var h = 0;

                    open = true;

                    intval = setInterval(function () {

                        h++;

                        mdiv.style.height = h + 'px';

                        if (h >= initHeight)

                            window.clearInterval(intval);

                    }, 1

                    );

                }

               

            }

           

           

              

        </script>

     

    </body>

    </html>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, November 22, 2017 8:17 PM