Народ кто сталкивался с такой вот задачкой, ни как не получается её решить.
Задача состоит в том что бы на странице отображались категории, (Заголовок/под ним изображение) в ряду 3 категории, 3 колонки, сам вывод осуществляется через foreach категорий и foreach субкатегорий, функция работате отлично всё выводит, необходимо сделать так что бы при клике на категорию внизу появлялся блок с субкатегориями, на данный момент всё расползается
<?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="btn">'; echo '<i><img src="'. wp_get_attachment_url( $thumbnail_id ) .'" style="border:0;"/></i>'; echo '</div>'; echo '<div class="new-vid-razdel">'; 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 '<i><img src="'. wp_get_attachment_url( $thumbnail_id ) .'" style="width: 100px; height: 100px; border:0;"/></i>'; echo '<a href="' . get_term_link( $product_category ) . '" title=""><h4>' . $product_category->name . '</h4></a>'; echo '</li>'; }} echo '</ul>'; echo '</div>'; echo '</article>'; } } echo '</div>'; ?>
Пример
как я понял, там о js еще рано говорить, с версткой беда.
Прежде чем прятать nav.new-vid-razdel в display: none;
сначала надо сверстать как он будет отображаться открытый, а пока там каша.
При текущей верстке как сделать nav.new-vid-razdel выезжающим/появляющимся без position: absolute
я не знаю, колонки на флексах и если пытаться разрывать шаблон дочерними элементами - все поползет, поэтому только absolute выводить и уже при нажатии на родителя добавлять нужный класс и показывать дочерние элементы правильно спозиционировав.
Народ, Help me!
, скрипт js написал, сверстал как надо, ни как не догоню две вещи:
1) Как всё таки делать разрыв между строк (надо сделать 3 колонки в 3 ряда);
2) Как сделать так, что бы при клике на другую категорию, сначала js сворачивался, а новый после открывался. (на данный момент при клике открывается и закрывается)
Почти на финишной прямой, везде уже писал, на разных форумах, ответа не получил.
Огромное спасибо автору
вот его решение
можно его доделать либо под woocommrce, либо под вывод товаров wp recall. Тема закрыта