Как при нажатии на кнопку активировать чек-бокс?

Question

[denchik2000009]

Есть блок- аккордеон, работающий на нажатии чек бокса, подскажите как активировать или деактивировать чек бокс при нажатии на кнопку, объясните логику интеграции
код html

<div class="large-12 medium-12 small-12 columns">
<div class="spoiler">
<input type="checkbox" id="spoilerid" style=""><label for="spoilerid_1" style="">
Заголовок
</label><div class="spoiler_body" style="">
<p>раскрывающийся текст</p>
</div>

Код css

.spoiler > input + label:after{content: ;float: right;font-family: "Gl";}
.spoiler > input:checked + label:after{content: ;float: right;font-family: "Gl";}
.spoiler > input{display:none;}
.spoiler > input + label , .spoiler > .spoiler_body{background:#fafafa;padding:5px 15px;overflow:hidden;width:100%;box-sizing: border-box;display: block;}
.spoiler > input + label + .spoiler_body{display:none;}
.spoiler > input:checked + label + .spoiler_body{display: block;}
.spoiler > .spoiler_body{background: #FFF;border: 2px;border-color:#fcfcfc;border-top: none;}

Comments

[Ankhena]

Какой элемент из вашего кода вы считаете кнопкой?

Чекбокс переключается при на нажатии на сам чекбокс или на его лейбл.
Лейбл и чекбокс связываются через атрибуты for и id.
У вас в коде они не соответствую друг другу.

[denchik2000009]

Ankhena, слово "заголовок" находится в лейбле, я просто перепутал id, там id в теге лейбл, в коде id="spoilerid", кнопку я планировал разместить в сам лейбл, но при попытке нажатия на кнопку в лейбле ничего не происходило, как тогда кнопку надо написать что бы все работало?

[Ankhena]

denchik2000009, не надо никуда писать кнопку.
Стилизуйте сам лейбл как вам нравится.

[Ankhena]

denchik2000009, https://jsfiddle.net/vbnr2ht9/

Answer 1

[Арсений Матыцин]

input type="checkbox" id="spoilerid" style="" \ label for="spoilerid_1" style=""

ID и обращение в принципе не связаны никак. Они должны быть идентичными и уникальными.

Answer 2

[Mikhail Larchanka]

В вашем случае просто вставить input внутрь label и все.

А вообще аттрибут for у label должен содержать точно такое же значение как и id чекбокса.