Как да създадем разгъваем DIV с CSS

Въведение

Със сгъваеми DIV‑елементи можете да скриете част от съдържанието и да го покажете само когато потребителят кликне върху заглавието. Това прави страницата по‑прегледна и улеснява навигацията.

Стъпка 1 – HTML структура

Създайте елемент <div>, който ще съдържа скрития текст. Поставете го в <body> и задайте първоначално display:none; чрез CSS.

<div id="myPopup" class="collapsible">
    <h3>Popup текст<br>Как изглежда?</h3>
</div>

Стъпка 2 – Тригър за отваряне

Добавете връзка, която при клик активира JavaScript функцията за превключване на видимостта.

<a href="javascript:void(0);" onclick="toggleDiv('myPopup')">Кликнете за разширяване</a>

Стъпка 3 – JavaScript функция

Поставете следния скрипт в <head> или преди затварящия <body> таг.

<script>
function toggleDiv(id) {
    var el = document.getElementById(id);
    if (el.style.display === "none" || el.style.display === "") {
        el.style.display = "block";
    } else {
        el.style.display = "none";
    }
}
</script>

CSS стил

<style>
.collapsible {
    display: none; /* скрито по подразбиране */
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
}
</style>

Съвет

Текстът “Кликнете за показване/скриване” се показва благодарение на CSS стила, зададен на елемента .collapsible. При първото кликване се появява съдържанието, при второто – изчезва.

URL:https://bg.whycomputer.com/Internet/100207853.html

Как да извикате JavaScript функция от Python

Какво се случва, ако публикацията ми бъде блокирана в Craigslist?

Интернет

Как да създадете колаж в Photobucket

Въведение Photobucket е уебсайт, който позволява лесно качване и споделяне на цифрови снимки. С приятелски интерфейс и множество инструменти за редактиране и съхранение, той предлага и функция за създаване на професионално изглеждащи колажи‑скрапбуци, които можете да запазите в акаунта си и да печат

Как да създадем колони с вертикални линии в Microsoft Word

Когато създавате бюлетин или брошура, дълъг непрекъснат блок текст е скучен и дори досаден за четене. За по‑опростено оформление текстът трябва да се подрежда в колони, които спестяват място и изглеждат привлекателно. Microsoft Word разполага с функция за създаване на равномерни колони, разделени с

Интернет