The site has a large list of categories. It is necessary that, when viewed from mobile devices, all categories were hidden under a spoller called "Categories". When you click on it, you need to go down the entire list. The code is there, but it does not work correctly.

HTML:

<div class="categoryitem spoiler-wrapper"> <div class="spoiler folded"><a href="javascript:void(0);">Категории</a></div> <div class="spoiler-text"> <?php **этот php код отвечает за вывод рубрик** ?> </div> </div>

jQuery:

 <script> jQuery(document).ready(function() { if ( jQuery(window).width() > 500 ) { jQuery('.spoiler-text').hide() jQuery('.spoiler').click(function(){ jQuery(this).toggleClass("unfolded").toggleClass("folded").next().slideToggle() }) } }); </script>

This code basically works, but at any screen width,

    2 answers 2

    css media to help you for what such difficulties, in the styles write @media only screen and (max-width: 500px){.spoiler-text{display: none;}} and the script is already registering the expansion by click

       if ( jQuery(window).width() > 500 )

      change to

       if ( jQuery(window).width() < 500 )