Форум Сайтостроение Веб-строительство

Сворачивание и разворачивание меню.

Z
На сайте с 03.06.2018
Offline
0
Zephirka
443

Всем привет. Я новичек в веб программирование.

подскажите как реализовать сворачивание текста если нажал на другое разворачивание 

<script type="text/javascript">

     function showhide(id) {

       	var e = document.getElementById(id);

       	e.style.display = (e.style.display == 'block') ? 'none' : 'block';

		

     }

    

    </script>







 <li><a href="javascript:showhide('Opisanie')">Описание</a></li>

      <li><a href="javascript:showhide('Opcii')">Опции</a></li>

      <li><a href="javascript:showhide('dop')">Дополнительно</a></li>

      <li><a href="javascript:showhide('Zamer')">Замер и Монтаж</a></li>



<div id="Opisanie" style="display:none;">

  <br>

		<br>

	<p> 111111</p>

</div>





<div id="Opcii" style="display:none;" >

  <br>

		<br>

	<p> 222222</p>

</div>





<div id="dop" style="display:none;">

  <br>

		<br>

	<p> 33333333</p>

</div>







<div id="Zamer" style="display:none;">

  <br>

		<br>

	<p> 44444444</p>

</div>
WebMage
На сайте с 17.08.2011
Offline
147
WebMage
#1

То что Вы написали не совсем понятно.

Если имеете в виду меню сайта на движке Wordpress то такое меню называется "Аккордеон", вот тут есть пример реализации с помощью плагина.

Z0
На сайте с 03.09.2009
Offline
778
ziliboba0213
#2

Если я вас верно понял, то, например, так:


<script type="text/javascript">
     function showhide(id) {
       	var e = document.getElementById(id);

	var x = document.querySelectorAll(".menu");
	for (var i = 0; i < x.length; i++) {
		x.style.display = "none";
	}


       	e.style.display = (e.style.display == 'block') ? 'none' : 'block';	
     }
    
    </script>



 <li><a href="javascript:showhide('Opisanie')">Описание</a></li>
      <li><a href="javascript:showhide('Opcii')">Опции</a></li>
      <li><a href="javascript:showhide('dop')">Дополнительно</a></li>
      <li><a href="javascript:showhide('Zamer')">Замер и Монтаж</a></li>

<div class="menu" id="Opisanie" style="display:none;">
  <br>
		<br>
	<p> 111111</p>
</div>


<div class="menu" id="Opcii" style="display:none;" >
  <br>
		<br>
	<p> 222222</p>
</div>


<div class="menu" id="dop" style="display:none;">
  <br>
		<br>
	<p> 33333333</p>
</div>



<div class="menu" id="Zamer" style="display:none;">
  <br>
		<br>
	<p> 44444444</p>
</div>

Если использовать jquery так вообще все просто :)

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий