Select в виде аккордеона
-
Помогите с решением такого вопроса. Есть ли способы,чтобы сделать select в виде аккордеона? На сайте есть очень много категорий и подкатегорий. Для пользователя выбор категории осуществлён с помощью выпадающего списка
<select></select>
.
В файле функций есть функция, которая создаёт таксономию для select-а из массива категорий. Вот эта функция:/* * Display category hierarchy in select category dropdown on advert form */ if( !function_exists('addifier_hierarchy_select_taxonomy') ){ function addifier_hierarchy_select_taxonomy( $terms, $depth = 0, $selected = array(), $allow_parent = false ){ foreach( $terms as $term ){ if( !empty( $term->children ) && !$allow_parent ){ echo '<optgroup label="'.str_repeat(' ', $depth).$term->name.'">'; addifier_hierarchy_select_taxonomy( $term->children, $depth + 2, $selected ); echo '</optgroup>'; } else{ echo '<option value="'.esc_attr( $term->term_id ).'" '.( in_array( trim( $term->term_id ), $selected ) ? 'selected="selected"' : '' ).'>'.str_repeat(' ', $depth).$term->name.'</option>'; } if( !empty( $term->children ) && $allow_parent ){ addifier_hierarchy_select_taxonomy( $term->children, $depth + 2, $selected, true ); } } } }
Далее, в файле, который управляет формами, есть код, который добавляет форму выбора категорий и в этом коде используется предыдущая функция. Вот код формы:
<div class="white-block white-block-extra-padding"> <div class="white-block-title"> <h5><?php esc_html_e( 'Категории объявления', 'adifier' ) ?></h5> </div> <div class="white-block-content"> <?php $categories = adifier_get_taxonomy_hierarchy( 'advert-category' ); if( !empty( $categories ) ){ ?> <div class="form-group no-margin"> <label for="category"><?php esc_html_e( 'Категория *', 'adifier' ) ?></label> <select name="category" id="category" class="select2-enabled"> <option value=""><?php esc_html_e( '- Выбрать -', 'adifier' ) ?></option> <?php if( !empty($categories) ){ addifier_hierarchy_select_taxonomy( $categories, 0, $category_ids ); } ?> </select> </div> <?php } ?> <div class="category-custom-fields form-group no-margin"> <?php if( !empty( $category_ids ) ){ Adifier_Custom_Fields_Advert::get_cf( $category_ids, $id ); } ?> </div> </div> </div>
В функции родительские категории добавляются в optgroups, а дочерние в options.
Даже если придумать код для свёртывания optgroups, я знаю, что optgroups нельзя выбрать, кликать по ним.
Если в функции везде заменить значение $allow_parent на true, в форме все найденные категории будут в виде options и тогда родительские категории доступны для выбора.
Multiple для select не тоже не вариант.
После кучи всего вышесказанного, поясню. Заменять select, допустим, на ul li или что-то другое, затруднительно. Код в файлах заточен под select (css тоже). Нужно, чтобы optgroups можно было свернуть и развернуть. Так как категорий и подкатегорий очень много и пользователю будет очень трудно найти нужную категорию, и также будет трудно сразу определить к какому «родителю» она относится. То есть, нужно сделать оптгруппы и опции выпадающего списка в виде аккордеона.
В PHP и JS не силён. Помогите разрешить эту ситуацию.
Заранее большое спасибо!
- Тема «Select в виде аккордеона» закрыта для новых ответов.