There is a gallery that I want to open when you click on the arrow and close when you click on another. I can not understand why, when when the toggle method is applied to the hidden arrow, it displays the element as inline , not block , although it is initially predefined as block and how can this be corrected? fiddle

  $('#arrow-slide1').click(function() { $('#gallary-hide1').toggle(200); $('#arrow-slide1').toggle(); $('#arrow-slide1-up').toggle(); }); 
 .gallary-hide { display: none; } .arrow-slide { background: #fff url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-up-b-128.png") no-repeat; display: block; width: 50px; height: 50px; margin: 0 auto; } .arrow-slide-up { background: #fff url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-down-b-128.png") no-repeat; display: none; width: 50px; height: 50px; margin: 0 auto; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span id="arrow-slide1" class="arrow-slide"></span><span id="gallary-hide1" class="gallary-hide">[Best_Wordpress_Gallery id="2" gal_title="party"]</span><span id="arrow-slide1-up" class="arrow-slide arrow-slide-up"></span>

    1 answer 1

    toggle does not take into account which display parameter is in the styles of the element.

    Use .toggleClass()

    html

     <span class="myspan span-hidden">test</span>

    css

     .myspan{ display: block; } .myspan.span-hidden{ display: none; }

    jquery

      $(".myspan").toggleClass('span-hidden');
    • or it turns out to be easier - replace the span with a div - Vasya