Доброго часу доби. Знизу я навів невеликий приклад. Як можна гарно перебрати циклом по id, щоб спрацьовували кліки і властивості css для кожної кнопки?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style type="text/css">
.view {
display: none;
}
</style>
<p class="p-just">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu sollicitudin nibh. Ut vitae nisl ac neque gravida ullamcorper viverra id lorem. Aenean tempor neque a maximus lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas velit erat, iaculis id consectetur eget, convallis sed ex</p>
<span class="view" id="view1">nascetur ridiculus mus. Maecenas velit erat, iaculis id consectetur eget, convallis sed ex. Sed eget condimentum neque.</span>
<button id="more1">Детальніше</button>
<p class="p-just">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu sollicitudin nibh. Ut vitae nisl ac neque gravida ullamcorper viverra id lorem. Mauris vehicula, nibh in auctor eleifend, odio dui pretium ante, nec sodales velit metus at massa. Curabitur elementum quam sapien, quis aliquet lectus facilisis eget. Aenean faucibus</p>
<span class="view" id="view2">nascetur ridiculus mus. Maecenas velit erat, iaculis id consectetur eget, convallis sed ex. Sed eget condimentum neque. Mauris vehicula, nibh in auctor eleifend, odio dui pretium ante, nec sodales velit metus at massa. Aenean nec aliquet ligula.</span>
<button id="more2">Детальніше</button>
<p class="p-just">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu sollicitudin nibh. Ut vitae nisl ac neque gravida ullamcorper viverra id lorem. Aenean tempor neque a maximus lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas velit erat, iaculis id consectetur eget, convallis sed ex. Sed eget condimentum neque. Mauris vehicula, nibh in auctor eleifend, odio dui pretium ante, nec sodales velit metus at massa.</p>
<span class="view" id="view3">nascetur ridiculus mus. Maecenas velit erat, iaculis id consectetur eget, convallis sed ex. Sed eget condimentum neque. Mauris vehicula, nibh in auctor eleifend, odio dui pretium ante, nec sodales velit metus at massa.</span>
<button id="more3">Детальніше</button>
<script type="text/javascript">
if (document.getElementById("more1") != null) {
document.getElementById("more1").onclick = function() {
document.getElementById('more1').style.display = "none";
document.getElementById('view1').style.display = "inline";
}
};
if (document.getElementById("more2") != null) {
document.getElementById("more2").onclick = function() {
document.getElementById('more2').style.display = "none";
document.getElementById('view2').style.display = "inline";
}
};
if (document.getElementById("more3") != null) {
document.getElementById("more3").onclick = function() {
document.getElementById('more3').style.display = "none";
document.getElementById('view3').style.display = "inline";
}
};
</script>
</body>
</html>
здається, проблем немає