Как перестроить код чтобы срабатывал скрипт?

Question

[Валентина]

есть функция которая выводит чекбоксы списком с уникальным индентификатором

$choice_value  = esc_attr( $choice_value );
				$choice_markup = "<li class='gchoice_{$id}'>
								<input name='input_{$input_id}' type='checkbox' $logic_event value='{$choice_value}' {$checked} id='choice_{$id}' {$tabindex} {$disabled_text} />
								<label for='choice_{$id}' id='label_{$id}'>{$choice['text']}</label>
							</li>";

на выходе получается следующее :

<ul class="gfield_checkbox" id="input_2_3"><li class="gchoice_2_3_1">
								<input name="input_3.1" type="checkbox" value="Церковь 1|300" id="choice_2_3_1" tabindex="3">
								<label for="choice_2_3_1" id="label_2_3_1" price=" +300.00 грн">Церковь 1<span class="ginput_price"> +300.00 грн</span></label>
							</li><li class="gchoice_2_3_2">
								<input name="input_3.2" type="checkbox" value="Церковь 2|200" id="choice_2_3_2" tabindex="4">
								<label for="choice_2_3_2" id="label_2_3_2" price=" +200.00 грн">Церковь 2<span class="ginput_price"> +200.00 грн</span></label>
							</li><li class="gchoice_2_3_3">
								<input name="input_3.3" type="checkbox" value="Церковь 3|800" id="choice_2_3_3" tabindex="5">
								<label for="choice_2_3_3" id="label_2_3_3" price=" +800.00 грн">Церковь 3<span class="ginput_price"> +800.00 грн</span></label>
							</li><li class="gchoice_2_3_4">
								<input name="input_3.4" type="checkbox" value="Церковь 4|0" id="choice_2_3_4" tabindex="6">
								<label for="choice_2_3_4" id="label_2_3_4" price="">Церковь 4<span class="ginput_price"></span></label>
							</li><li class="gchoice_2_3_5">
								<input name="input_3.5" type="checkbox" value="Церковь 5|1" id="choice_2_3_5" tabindex="7">
								<label for="choice_2_3_5" id="label_2_3_5" price=" +1.00 грн">Церковь 5<span class="ginput_price"> +1.00 грн</span></label>
							</li><li class="gchoice_2_3_6">
								<input name="input_3.6" type="checkbox" value="Церковь 6|500" id="choice_2_3_6" tabindex="8">
								<label for="choice_2_3_6" id="label_2_3_6" price=" +500.00 грн">Церковь 6<span class="ginput_price"> +500.00 грн</span></label>
							</li><li class="gchoice_2_3_7">
								<input name="input_3.7" type="checkbox" value="Церковь 7|90" id="choice_2_3_7" tabindex="9">
								<label for="choice_2_3_7" id="label_2_3_7" price=" +90.00 грн">Церковь 7<span class="ginput_price"> +90.00 грн</span></label>
							</li><li class="gchoice_2_3_8">
								<input name="input_3.8" type="checkbox" value="Церковь 8|20" id="choice_2_3_8" tabindex="10">
								<label for="choice_2_3_8" id="label_2_3_8" price=" +20.00 грн">Церковь 8<span class="ginput_price"> +20.00 грн</span></label>
							</li><li class="gchoice_2_3_9">
								<input name="input_3.9" type="checkbox" value="Церковь 9|30" id="choice_2_3_9" tabindex="11">
								<label for="choice_2_3_9" id="label_2_3_9" price=" +30.00 грн">Церковь 9<span class="ginput_price"> +30.00 грн</span></label>
							</li><li class="gchoice_2_3_11">
								<input name="input_3.11" type="checkbox" value="Церковь 10|50" id="choice_2_3_11" tabindex="12">
								<label for="choice_2_3_11" id="label_2_3_11" price=" +50.00 грн">Церковь 10<span class="ginput_price"> +50.00 грн</span></label>
							</li></ul>
<a class="show-hide-btn">
    <span>Показать все</span>
  </a>

Прописано в стилях скрывать после 4 пункта все остальные результаты

.gchoice_{$id} li:nth-child(n+5) {
  display: none;
}

.show-hide-btn,
.show-hide-btn1 {
    display: inline-flex;
    align-items: center;
    height: 29px;
    font-family: 'Roboto Slab';
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}
.show-hide-btn:hover,
.show-hide-btn1:hover {
    background: #FBBC25;
    color: #333;
}

И вот в чем вопрос Есть скрипт который должен при нажатии на кнопку показать еще показывать все остальные пункты, но не срабатывает.

$(function(){
  $('.show-hide-btn').click(function(){
    $('.gchoice_{$id}:nth-child(n+5)').slideToggle('');
  });
});

В чем ошиблась?

Comments

[illuzor]

При чём тут java?

[aol-nnov]

illuzor, вместо кококо можно, внезапно, пойти и поправить вопрос. модер потом заакцептит )

Answer 1

[ThunderCat]

вынесите свою магию в отдельный класс, вместо

.gchoice_{$id} li:nth-child(n+5) {  display: none; }

поставьте класс заглушку какую-то, типа .htoggle li:nth-child(n+5) { display: none; } и по клику делайте тогглкласс, соответственно по старту будет <li class="gchoice_2_3_1 htoggle">

Comments

[Валентина]

спасибо за идею, все сработало.