сворачивание/разворачивание элементов таблици
<table> <tr> <th width="870px"><span class="th">Начальное общее образование</span><span class="th1">(1 уровень - 1-4 класс) - срок обучения 4 года;</span></th> <td width="70px"><span class="tdClick">просмотр</span></td> </tr> <tr> <th><span class="th">Основное общее образование</span><span class="th1">(2 уровень - 5-9 класс) - срок обучения 5 года;</span> </th> <td width="70px"><span class="tdClick">просмотр</span></td> </tr> <tr> <th><span class="th">Срок обучения в школе - интернате</span><span class="th1">Срок обучения - 9 лет</span></th> <td width="70px"><span class="tdClick">просмотр</span></td> </tr> </table> как сделать чтобы при нажатии на class="tdClick" класс th скрывался а класс th1 раскрывался |
Открывашка 238
qwerty14,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
tr .th, tr.active .th1 {
display: table-row;
}
tr .th1, tr.active .th {
display: none;
}
.tdClick {
cursor: pointer;
}
</style>
</head>
<body> <table>
<tr>
<th width="870px"><span class="th">Начальное общее образование</span><span class="th1">(1 уровень - 1-4 класс) - срок обучения 4 года;</span></th>
<td width="70px"><span class="tdClick">просмотр</span></td>
</tr>
<tr>
<th><span class="th">Основное общее образование</span><span class="th1">(2 уровень - 5-9 класс) - срок обучения 5 года;</span> </th>
<td width="70px"><span class="tdClick">просмотр</span></td>
</tr>
<tr>
<th><span class="th">Срок обучения в школе - интернате</span><span class="th1">Срок обучения - 9 лет</span></th>
<td width="70px"><span class="tdClick">просмотр</span></td>
</tr>
</table>
<script>
window.addEventListener("DOMContentLoaded", function() {
var b = document.querySelectorAll("tr");
[].forEach.call(b, function(a) {
a.querySelector(".tdClick").addEventListener("click", function() {
a.classList.toggle("active")
})
})
});
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 01:24. |