-1

I am using this javascript for collapsing and expanding a div in which is some information. The div has class .info. After page reloading, you can see first that the div is visible, but within a second, when the js is loaded, it disappears. How can i achieve that when reloading the page, also at the very first second time the div is not visible?

$( document ).ready(function() {

   var $accordionIO = $('.accordion .toggle-button');


   $accordionIO.prev('div').hide();

   $(".accordion .toggle-button").click(function () {
    //Inner 
    var jqInner = $('.info', $(this).parent());
    if (jqInner.is(":visible"))
    {
        jqInner.slideUp();
        $(this).find('.button-switch').html('Information');
    }
    else
    {
        jqInner.slideDown();
        $(this).find('.button-switch').html('Close');
    }
   });
});

The html:

<!-- Start toggle script -->
    <div class="accordion">
        <div class="info">
          <?php
             include('includes/information.txt');
          ?>
        </div>
        <div class="toggle-button"><span class="button-switch">Information</span> </div>
    </div>
dan1st
  • 12,568
  • 8
  • 34
  • 67
Jack Maessen
  • 1,780
  • 4
  • 19
  • 51
  • Possible duplicate of [How do you create a hidden div that doesn't create a line break or horizontal space?](https://stackoverflow.com/questions/1992114/how-do-you-create-a-hidden-div-that-doesnt-create-a-line-break-or-horizontal-sp) – Herohtar Feb 15 '18 at 22:40

1 Answers1

3

Please try adding inline style attribute. See example below:

<div style="display:none;"></div>
cjatstackoverflow
  • 117
  • 10