Как сделать выпадающий список при клике на блок?

Question

[midas34]

Добрый день уважаемые специалисты, столкнулся с такой проблемой, необходимо реализовать вывод категорий и подкатегорий разделов товара, вывод категорий в 3 колонки, при клике на категорию нужен выпадающий блок снизу списком во всю ширину по горизонтали, и желательно реализовать на css.
На данный момент вывод имеется, не получается средствами css сделать вывод подкатегорий во всю ширину без сдвига основных категорий,
Вывод
При клике на блок
Код

<div id="new-vid-category">
	<article class="new-vid-catalog">
		<div class="new-vid_title">
			<a href="' . get_term_link( $product_category ) . '" title=""><h2>' . $product_category->name . '</h2></a> /*Заголовок*/
		</div>
		<div class="new-vid__image">
            <i><img src="'.  wp_get_attachment_url( $thumbnail_id ) .'" style="border:0;"/></i> /*Картинка*/
        </div>
		<div class="new-vid_razdel">
			<div class="wrapper">
				<div class="content">
					<ul class="new-parent-title__overlay">
						<li class="new-parent-desc">
                <div class="new-vid-razdel__image">
                <i><img src="'.  wp_get_attachment_url( $thumbnail_id ) .'" style="border:0;"/></i> /*Картинка*/
                </div>
                <a href="' . get_term_link( $product_category ) . '" title=""><h4>' . $product_category->name . '</h4></a> /*Заголовок раздела*/ 
                </li>
			</ul>
			</div>
      </div>
      </div>
    </article>

</div>

Comments

[Тарас Шульга]

Зачем городить все это на css если это делается в 2 строчки js? При том, что это WP тобишь там уж вшитый Jquery, тогда вообще не понятно зачем все это.

[midas34]

по js опыта нету, сделать на css тоже реально, может кто сталкивался

[Тарас Шульга]

midas34, солнышко ты мое - куда же ты тогда в woocommerce полез если для тебя событие онклика нечто нереальное.
Да в принципе можно загорячиться и бахнуть через чек-боксы и лейблы, но с выводом в wp будет еще больше проблем.

[Тарас Шульга]

Вот вчера показывал человеку событие оклика https://codepen.io/angryyum/pen/MWYoQYE только тебе нужен не один элемент, а масс элементов.

[midas34]

Тарас чуток ты меня не понял, вывод категорий идёт через написанный шорткод

<?php
	$args = array(
        'taxonomy'   => 'product_cat',
        'hide_empty' => false,
        'parent'   => 0,
      );
      $product_categories = get_terms( $args );
      $count = count($product_categories);
    echo '<div id="new-vid-category">';
      if ( $count > 0 ){
        foreach ( $product_categories as $product_category ) {
            $thumbnail_id = get_woocommerce_term_meta( $product_category->term_id, 'thumbnail_id', true );
			echo '<article class="new-vid-catalog">';
			echo '<div class="new-vid_title">';
			echo  '<a href="' . get_term_link( $product_category ) . '" title=""><h2>' . $product_category->name . '</h2></a>';
			echo  '</div>';
			echo '<div class="new-vid__image">';
            echo  '<i><img src="'.  wp_get_attachment_url( $thumbnail_id ) .'" style="border:0;"/></i>';
            echo  '</div>';
      echo '<div class="new-vid_razdel">';
        echo '<div class="wrapper">';
          echo '<div class="content">';
            echo  '<ul class="new-parent-title__overlay">';
			$args = array(
                'taxonomy'   => 'product_cat',
                'hide_empty' => false,
                'parent'   => $product_category->term_id,
              );
              $product_categories = get_terms( $args );
              $count = count($product_categories);
              if ( $count > 0 ){
                foreach ( $product_categories as $product_category ) {
                  $thumbnail_id = get_woocommerce_term_meta( $product_category->term_id, 'thumbnail_id', true );
                 echo '<li class="new-parent-desc">';
                 echo '<div class="new-vid-razdel__image">';
                  echo '<i><img src="'.  wp_get_attachment_url( $thumbnail_id ) .'" style="width: 150px; height: 100px;"/></i>';
                  echo '</div>';
                 echo  '<a href="' . get_term_link( $product_category ) . '" title=""><h4>' . $product_category->name . '</h4></a>'; 
                 echo  '</li>';
				}}
			echo  '</ul>';
			echo  '</div>';
      echo  '</div>';
      echo  '</div>';
      echo  '</article>';
        }
      }
      
	  echo  '</div>';
?>

Вся конструкция уже есть в наличие, на данный момент, блоки, вывод категорий и разделов, тут задумался по отображению подкатегорий по клике на категорию, да можно сделать это и на js, если посидеть можно и за час додуматься, но хочу вначале попытатся осуществить через css ради мобильников

[Тарас Шульга]

midas34, как создание костылей на css = для мобилок?)

[Тарас Шульга]

midas34, и да на css без изменения шаблона - уже точно не сделаешь.

[midas34]

Какого шаблона? при чём здесь костыль? https://jsfiddle.net/Cerebrl/uhykY/ вот частичное решение без js

[Тарас Шульга]

midas34, каюсь не думал так такой реализацией. Но блин все таки нафига все это?) Что телефонам это даст?)
Я бы предложил реализовать это под ваш случай - но есть пару нюансов.

[midas34]

По мне решения связанные именно на css более практичнее чем js, потому что всё таки стили отвечают за отображения в браузерах, на данный момент производителей мобилок и браузеров много, и под каждого не угодишь, встречался с одним веб антивирусником который блокировал загрузку скриптов и весь сайт смотрелся криво, поэтому в последнее время стараюсь большинство таких вопросов решать средствами css

[Тарас Шульга]

midas34, извините конечно. Но нет вы пытаетесь заниматься фигней. За 5 лет не разу не видел чтобы что-то блокануло событие клика. Да и боже мой это один на тысячу/миллион - 2020 год через неделю. А мы все боимся, что js у клиента будет заболочен. Ну кто виноват, что он дурбецало?

[midas34]

Тарас предлагаю сосредоточиться на решении вопроса, а не рассуждать что, да как, и у кого-) зачем заниматься болтологией?
Есть решение на js предлагайте, другой предложит и выложит на css

[Тарас Шульга]

midas34, да просто интересно под каким сильным веществом люди приходят к тому, что для кроссбраузерности то что является просто базой, классикой в js(событие клика) Начинают городить всякое непотребство на css

[midas34]

Хорошо-) у вас есть решение на js? предлагайте

[Ankhena]

midas34,

но хочу вначале попытатся осуществить через css ради мобильников

Что??

Нагородить костылей и испортить код ради мобильников? И чем мобильникам с этого будет легче? Вместо пары строк на jq?

Answer 1

[midas34]

Огромное спасибо автору PetrPo вот его решение Ссылка