Нужен javascript который будет делать следующее:
по клику на кнопку .step-1 .btn-no
(Шаг-1), должен добавляться класс .hidden
к первому tr
в таблице. Тоже самое и с остальными - там где нажимают "нет", скрывается соответствующий tr
в таблице.
Если на всех шагах нажали "нет", то во всех tr
надо убрать класс hidden
т.е. показать все tr
.
.step-1,.step-2,.step-3,.step-4 {
font-size: 1.4rem;
}
.btn-yes,.btn-no {
display: inline;
cursor: pointer;
border-bottom: 1px dashed #000;
}
.btn-yes:hover {
color: green;
border-bottom: 1px dashed green;
}
.btn-no:hover {
color: red;
border-bottom: 1px dashed red;
}
table {
margin-top: 30px;
font-size:1.2rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="step-1">
Шаг 1 -
<div class="btn-yes"><span>да</span></div>
<div class="btn-no"><span>нет</span></div>
</div>
<div class="step-2">
Шаг 2 -
<div class="btn-yes"><span>да</span></div>
<div class="btn-no"><span>нет</span></div>
</div>
<div class="step-3">
Шаг 3 -
<div class="btn-yes"><span>да</span></div>
<div class="btn-no"><span>нет</span></div>
</div>
<div class="step-4">
Шаг 4 -
<div class="btn-yes"><span>да</span></div>
<div class="btn-no"><span>нет</span></div>
</div>
<table border="0" cellpadding="0" cellspacing="0">
<tr><td>text 1</td></tr>
<tr><td>text 2</td></tr>
<tr><td>text 3</td></tr>
<tr><td>text 4</td></tr>
</table>