Как показать/скрыть DIV ?

[amanito]

как при нажатии на слово-ссылку показать под этой ссылкой текстовый блок <div style='display:none;'>text text text</div> а при повторном нажатии спрятать этот блок?

[psywalker]

как при нажатии на слово-ссылку показать под этой ссылкой текстовый блок <div style='display:none;'>text text text</div> а при повторном нажатии спрятать этот блок?

1) JS тебе в помощь.

2) Либо попробовать вместо дива использовать спан, скрыть его в ссылке, а при нажатии на неё показывать внизу.

[amanito]

это я понимаю, а как будет выглядеть код, если делать через SPAN?

[Justnewone]

по клику только JS. дать блоку с текстом сразу же класс .hidden{display:none}, а по клику на каком-либо элементе либо по какому-либо еще любому событию доставать из DOM этот текстовый блок и отбирать у него класс. Ну и добавлять так же, если надо.

[amanito]

это будет выглядеть так?

<a href="#" (какой здесь код?)> ПОКАЗАТЬ БЛОК</a>

<div style="display:none;">text text text</div>

[psywalker]

<a href="#">Нажать, чтобы спан появился <span>Скрытый блок</span></a>

a { position: relative;}

a span { display: none;}

a:hover span { display: block; position: absolute; bottom: 0; left: 0;}

[Justnewone]

А Вам че, просто и банально надо чтобы мы вместо Вас сделали?

[Mavrun]

почитай статейку

http://shublog.ru/javascript/kak-pokazat-i...-na-javascript/

[vbysnek]

Вот

<script type="text/javascript">
<!--
function viewdiv(id){
var el=document.getElementById(id);
if(el.style.display=="block"){
el.style.display="none";
} else {
el.style.display="block";
}
}
//-->
</script>
<a href="javascript:void(0);" onclick="viewdiv('mydiv');">Показать блок</a>
<div id="mydiv" style="display:none;">text text text</div>

Edited November 16, 2011 by vbysnek

[a35b63]

В 16.11.2011 в 16:21, vbysnek сказал:

<script type="text/javascript">
<!--
function viewdiv(id){
var el=document.getElementById(id);
if(el.style.display=="block"){
el.style.display="none";
} else {
el.style.display="block";
}
}
//-->
</script>
<a href="javascript:void(0);" onclick="viewdiv('mydiv');">Показать блок</a>
<div id="mydiv" style="display:none;">text text text</div>

 

А как сделать, чтобы при скрытии/появлении менялась надпись - Показать/Спрятать?

[klierik]

@a35b63, на коленке написал — https://jsfiddle.net/Lgf705zr/

[a35b63]

Спасибо, klierik

[Zmej00]

В 07.07.2016 в 12:31, klierik сказал:

@a35b63, на коленке написал — https://jsfiddle.net/Lgf705zr/

Здравствуйте.

Долго искал как реализовать открытые блока. Ваш вариант подходит отлично. Только не могу разобраться с одной ерундой.

Мне надо вставить несколько таких скриптов.

<a id="toggleLink" href="javascript:void(0);" onclick="viewdiv('mydiv');" data-text-show="Спрятать блок" data-text-hide="Показать блок">Показать блок</a>
<div id="mydiv" style="display:none;">text text text</div>

<script>
    function viewdiv(id) {
        var el = document.getElementById(id);
        var link = document.getElementById('toggleLink');
        if (el.style.display == "block") {
            el.style.display = "none";
            link.innerText = link.getAttribute('data-text-hide');
        } else {
            el.style.display = "block";
            link.innerText = link.getAttribute('data-text-show');
        }
    }

</script>
<br>
<a id="toggleLink" href="javascript:void(0);" onclick="viewdiv('mydiv2');" data-text-show="Спрятать блок" data-text-hide="Показать блок2">Показать блок2</a>
<div id="mydiv2" style="display:none;">text2 text2 text2</div>

<script>
    function viewdiv(id) {
        var el = document.getElementById(id);
        var link = document.getElementById('toggleLink');
        if (el.style.display == "block") {
            el.style.display = "none";
            link.innerText = link.getAttribute('data-text-hide');
        } else {
            el.style.display = "block";
            link.innerText = link.getAttribute('data-text-show');
        }
    }

</script>

Вот предположим 2 раза, id вроде поменял, а в итоге получается, то что на фото.

Подскажите как сделать, чтобы каждый был сам по себе?

Надо порядка 5-6 штук на страницу.

[Svetlanochka01]

Здравствуйте, подскажите, пожалуйста, возможна ли такая функция с обратным эффектом. Если есть блок <div>, который по нажатию надо скрыть, а при нажатии снова открыть. Попробовала Вашу функцию, но она при нажатии скрывает только со второго нажатия. Подскажите, плиз, что нужно изменить?

[sergei_burg]

07.07.2016 в 14:31, klierik сказал:

@a35b63, на коленке написал — https://jsfiddle.net/Lgf705zr/

Скажите а как сделать плавной и чтобы по умолчанию было открытым