0

I found an awesome solution on these forums How to create sliding DIV on click? However what I wanted was to have the content appear and disappear at a click of the button. Following is my code:

<html>
    <head>
        <title>CSS - Slider Test</title>
        <style type="text/css">
            .slide {
                /*visibility:hidden;*/
                border: 1px solid black;
                height: 0px;
                width:400px;
                overflow:hidden;
                transition:             height 500ms ease;
                    -moz-transition:    height 500ms ease;
                    -ms-transition:     height 500ms ease;
                    -o-transition:      height 500ms ease;
                    -webkit-transition: height 500ms ease;
            }

        </style>
        <script type="text/javascript">
            function slider(){
                var obj = document.getElementById('slide');//
                 //obj.style.visibility= (obj.style.visibility=='hidden')?'visible':'hidden';
                obj.style.height = ( obj.style.height == '0px' || obj.style.height == '' ) ?  '150px'  :  '0px';
            }
        </script>
    </head>
    <body>

    <input type="button" onclick="slider();" value="Click"/>

    <div id="slide" class="slide">
        <table>

            <tr>
                <th colspan="2" align="center">
                    Formats
                </th>
            </tr>
            <tr>
                <td style="width:140px;"><span id="lblCountry">Culture</span></td>
                <td>
                    <select name="cultureList" id="cultureList">
                        <option selected="selected" value="1033">English (United States)</option>
                        <option value="2057">English (United Kingdom)</option>
                        <option value="3084">French (Canada)</option>
                        <option value="4105">English (Canada)</option>

                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <span id="lblNumber">Number</span>
                </td>
                <td>
                    <input name="number" type="text" value="123,456,789.00" id="number" style="width:120px;" />
                </td>
            </tr>
            <tr>
                <td><span id="lblCurrency">Currency</span></td>
                <td>
                    <input name="curr" type="text" value="$123,456,789.00" id="curr" style="width:120px;" />
                </td>
            </tr>


        </table>


    </div>
     <div>
            Some other content
        </div>
    </body>
    </html>

Now the above code works on click as intended. What I am failing to achieve is to set its visibility to none by default and when I click on button, first its visibility is changed to visible and then the animation happens and on second click it disappears as well after the animation is completed..Can some one pls guide? Thanks

Community
  • 1
  • 1
user1063108
  • 662
  • 1
  • 10
  • 24
  • Your question is confusing me. The visibility is set to none. There's is just a black border-top to the element. – dowomenfart Apr 09 '15 at 14:53
  • I posted full code so it will work as it is. However if you uncomment the visibility part of css and js, you will see what I am trying to after and what is the behavior. What I am after is. On page load, only button is visible. WHen user clicks on button, the slider thing appears as well as animation will happen. And when user clicks on button again, the animation happens(content slides upwards) and finally visibility is set to none again... – user1063108 Apr 09 '15 at 14:57
  • Like this? http://jsfiddle.net/z68hbsmw/ – dowomenfart Apr 09 '15 at 15:03
  • absolutely...thanks...Can you post so that I can click it my solution? I cant understand what was that I was not doing correctly..:-( – user1063108 Apr 09 '15 at 15:05

1 Answers1

0

In your slider function() you had:

obj.style.visibility = (obj.style.visibility == 'hidden') ? 'visible' : 'hidden';

All you have to do is to look if visibility is visible

obj.style.visibility = (obj.style.visibility == 'visible') ? 'hidden' : 'visible';

DEMO

Plus, I would change in your CSS is transitions to all instead of just height. Makes it so the user doesn't see the visibility being change until the end of the transition.

dowomenfart
  • 2,803
  • 2
  • 15
  • 17