-2

I used js for function onclick:

    var x = document.getElementById("galeriabramy");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

My code php and html

           <h4 onclick="wzorBramyClick()" style="cursor: pointer;">
               <span>Wzory bram</span>
               <span class="span-fr"><img src="<?php echo get_template_directory_uri(); ?>/img/chervon-up.svg" /></span>
            </h4>
           <div id="galeriabramy" style="display: block;" class="col-12 gallery-block grid-gallery">
               <div class="row">
                   <?php
                   foreach( $media_wzory as $wzory ){
                       echo '<div class="col-md-3 item item-custom-gallery mb-3">';
                       echo '<a class="lightbox" href="'.wp_get_attachment_url($wzory['zdjecie_wzoru']).'">';
                       echo '<img class="img-gallery image scale-on-hover" src="'.wp_get_attachment_url($wzory['zdjecie_wzoru']).'">';
                       echo '<div class="w-100 text-center">';
                       echo '<h5>'.$wzory['nazwa_wzoru'].'</h5>';
                       echo '</div>';
                       echo '</a>';
                       echo '</div>';
                   }
                   ?>
               </div>
           </div>
       </div>

I would like to perform animation transition whith display none on display block

gsskrzysztof
  • 31
  • 4
  • 1
    Does this answer your question? [Transitions on the CSS display property](https://stackoverflow.com/questions/3331353/transitions-on-the-css-display-property) – rauberdaniel Mar 10 '21 at 15:17

1 Answers1

0

You can not animate the display property. If you want to fade in an element you can animate opacity instead or transform to move something in.

The display property does not only affect visuals but also layout of the site.

rauberdaniel
  • 1,017
  • 9
  • 22