При клике ссылки, открыть DIV блок, и при клике ещё раз, закрыть его

[Deff]

Я уже через CSS извращаюсь, но ничего не выходит

Cпойлер средсвами css - Это Возможно ?

[Perumov]

Есть способ на js, но работает только с jQuery 1.8.2. Можно ли такое на js или в связке с библиотекой jQuery 1.4.2 реализовать, подскажет кто-нить?

<script type="text/javascript">
$(function(){
 $("#toggler").on("click", function(){
  $("#popup-credit").show();
 })
 $(".cancelComment").on("click", function(){
  $("#popup-credit").hide();
 })
})
</script>

[ruslan_mart]

<div><input type="button" value="Открыть" onclick="Hide(this)">
<span style="display:none">Текст</span></div>

<script>
function Hide(a)
{
   var b = a.parentNode.getElementsByTagName('span')[0].style;
   if(a.value == 'Открыть')
   {
      a.value = 'Закрыть';
      b.display = '';
   }
   else
   {
      a.value = 'Открыть';
      b.display = 'none';
   }
}
</script>

[Perumov]

Deff,
А как такой же фокус можно проделать, если кнопка показа спойлера находится вне основного блока, а сам блок абсолютно позиционирован?
Получится, если вместо input'a прописать button и эту кнопку абсолютным позиционированием поставить в нужное место и так же поступить и с основным блоком? Мне нужно, чтобы блок показывался поверх самой кнопки и перекрывал ее.

[Perumov]

Я уже в отчаянии, ни где не могу найти совета ни оффлайн ни онлайн. Все, что пробую сделать - не работает
Повторяюсь: Как заставить работать такую структуру html кода? Нужно, чтобы при клике на ссылку с классом .pp-credit-block-button показывался блок с классом .popup-credit, потом при клике на ссылку с классом .cancelComment блок с классом .popup-credit закрывался. Выше я написал как такое реализуется с jQuery 1.8.2, но с этой версией библиотеки у меня перестает работать плагин prettyPhoto. Вопрос в следующем как это все сделать только на js или как подружить тот код js, который я написал выше с версией библиотеки jQuery 1.4.2?
Пожалуйста, помогите...

<!-- id нельзя использовать, так как на этой странице будет такая же структура кода, но с другим содержимым --> 
<a class="pp-credit-block-button" href="#">Кнопка</a>
<div class="popup-credit">
	<div class="credit_block">
		<a class="cancelComment" title="Закрыть">X</a>
		<h2>Заголовок</h2>
		<p>Текст</p>
		<p>Текст</p>
		<p>Текст</p>
		<a class="pp-credit-block-button" href="#" target="_blank">Ссылка</a>
	</div>
</div>

[Deff]

<style>
div.popup-credit{
  border:red 1px solid;
  display:none;
}
a.cancelComment {
  cursor:pointer;
  float:right;
  
  margin:-12px 12px;
}
</style>
<script type="text/javascript" src="http://yandex.st/jquery/1.4.2/jquery.min.js"></script>







<!-- id нельзя использовать, так как на этой странице будет такая же структура кода, но с другим содержимым --> 
                         <a class="pp-credit-block-button" href="#" onclick="return false">В рассрочку</a>
			 <div class="popup-credit">
				<div class="credit_block">
                                        <a class="cancelComment" title="Закрыть">X</a>
					<h2>Заголовок</h2>
					<p>Текст</p>
					<p>Текст</p>
					<p>Текст</p>
					<a class="pp-credit-block-button" href="#" target="_blank">Ссылка</a>
				</div>
			</div>



<script>
$(".pp-credit-block-button").click( function(){
  $(this).next(".popup-credit").toggle("fast")
});
$(".cancelComment").click( function(){
  $(this).parents(".popup-credit:first").hide("fast")
});
</script>

[Perumov]

Deff,
Вы Человек с большой буквы "Ч", СПАСИБО большое!!!
Скрипт просто супер, все работает как я и хотел!

[911fnn]

Подскажите,

есть скрипт, вывода и скрытия текста при клике на пункты.
как нужно его переделать, что бы при заходе на страницу или обновлении страницы 1 пункт был открыт, а далее работало все так же?

скрипт
<script type="text/javascript">
var folder = null;

function expandit( curobj )
{
if( !!folder )
folder.display = 'none';

folder= document.all ? document.all[curobj.sourceIndex+1].style : curobj.nextSibling.nextSibling.style;
folder.display = (folder.display==='none') ? '' : 'none';
return false;
}
</script>

<p style="cursor:hand" onClick="expandit(this)" align="right"><strong>3 пункт</strong></p>
<span style="display:none" style=&{head};>
открылся текст
</span>
<p style="cursor:hand" onClick="expandit(this)" align="right"><strong>2 пункт</strong></p>
<span style="display:none" style=&{head};>
открылся текст
</span>
<p style="cursor:hand" onClick="expandit(this)" align="right"><strong>1 пункт</strong></p>
<span style="display:none" style=&{head};>
открылся текст
</span>

[OlgaMarius]

Здравствуйте ув. форумчане!
Помогите, пожалуйста. Делаю адаптивное меню и столкнулась с интересной проблемой. Вот код, который открывает и закрывает меню:

function openbox(id){
 if(document.getElementById(id).style.display=='none'){
 document.getElementById(id).style.display='block';
 }else{
 document.getElementById(id).style.display='none';
 }
}

Для большого экрана div с меню отображается стандартно. Для маленького экрана меню "свернуто в кнопку" через медиа-запрос - #menu {display:none;}

Но скрипт приведенный выше не видит этот медиа-запрос и считает, что меню в данный момент отображено. Так как в основных стилях "none" не задано, а только в медиа-запросе.

Это приводит к тому, что меню раскрывается только по второму клику первый раз. В дальнейшем работает нормально. По клику сворачивается, по клику разворачивается. Что делать?

[jsnb]

Что делать?

Через style доступны только те свойства, которые указаны в атрибуте style тега. Для получения остальных свойств используйте getComputedStyle.
Например, так:

function openbox(id) {
  var el = document.getElementById(id);
  var display = getComputedStyle(el).display;
  el.style.display = display === 'none' ? 'block' : 'none';
}