Как при открытии div закрыть другие?

Question

[myaurizio]

Как чтобы при открытии одного элемента div закрывать другие?
Вот скрипт который сейчас реализует развертывание текста:

function function_name(value)
{ 
var id_v = $(value).attr('id'); 
var id = id_v.substr(8,1); 
 //console.log(id);
if ( jQuery.browser.msie && parseInt(jQuery.browser.version) == 6) {
if ($('#opis' + id).css("display")=="block") {$('#opis'+ id).css("display", "none");
} else {$('#opis'+ id).css("display", "block");
}
} else {$('#opis' + id).toggle("slow");}
if ($('#opislink'+ id).text()=='Свернуть') {$('#opislink'+ id).text('Развернуть');
} else {$('#opislink'+ id).text('Свернуть');
}
 
}

И можно ли вместо текста "Развернуть" взять значение из тега?

Answer 1

[Sergey]

Код верстки взят из комментария к первому ответу, частично переделан.
Вот написал под Вашу задачу. Надеюсь у Вас jQuery подключен, без него не будет работать.

<script>
  function showDescription(id) {
    $(".description").each(function () {
      $(this).hide();
    });

    $("#" + id).show();
  }
</script>

<ul>
  <li>
    1. <a href="#1" onclick="showDescription('one'); return false;">Один <span>раз</span></a>
  </li>
  <li>
    2. <a href="#1" onclick="showDescription('two'); return false;">Два <span>два</span></a>
  </li>
  <li>
    3. <a href="#1" onclick="showDescription('three'); return false;">Три <span>три</span></a>
  </li>
</ul>

<div class="descriptionContainer">
    <div id="one" class="description">
      <h1>Заголовок 1</h1>
      Lorem Ipsum is simply dummy text
    </div>

    <div id="two" class="description">
      <h1>Заголовок 2</h1>
      Lorem Ipsum is simply dummy text
    </div>

    <div id="three" class="description">
      <h1>Заголовок 3</h1>
      Lorem Ipsum is simply dummy text
    </div>
</div>

Comments

[myaurizio]

Спасибо, то что нужно!

[myaurizio]

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

[Sergey]

<script>
  function showDescription(id, obj) {
	  $(".link").each(function () {
		  $(this).removeClass('active');
	  });

	  $(obj).addClass('active');

	  $(".description").each(function () {
		  $(this).hide();
	  });

	  $("#" + id).show();
  }
</script>

<style>
    .link.active {color:red;}
    .description {display: none;}
    .description.active {display: block;}
</style>

<ul>
  <li>
    1. <a class="link active" href="#1" onclick="showDescription('one', this); return false;">Один <span>раз</span></a>
  </li>
  <li>
    2. <a class="link" href="#1" onclick="showDescription('two', this); return false;">Два <span>два</span></a>
  </li>
  <li>
    3. <a class="link" href="#1" onclick="showDescription('three', this); return false;">Три <span>три</span></a>
  </li>
</ul>

<div class="descriptionContainer">
    <div id="one" class="description active">
      <h1>Заголовок 1</h1>
      Lorem Ipsum is simply dummy text
    </div>

    <div id="two" class="description">
      <h1>Заголовок 2</h1>
      Lorem Ipsum is simply dummy text
    </div>

    <div id="three" class="description">
      <h1>Заголовок 3</h1>
      Lorem Ipsum is simply dummy text
    </div>
</div>

[myaurizio]

Firsov36, Супер, то что нужно, спасибо!

Answer 2

[Comsequent]

Убрать у всех дивов класс show, и добавить его только блоку который открыли(по которому кликнули).

if(document.querySelector('yourSelector').classList.contains('show'){
// Do something
} else { 
// do else
}

============================
То, что Вы хотите сделать - вариация на тему html tags.
Немного поправим Ваш код, для упрощения жизни.
html

<ul>
    <li class='tab-btn'>1.<a href="#1" id="opislink_0"> Один <span style="font-weight:bold">раз</span></a></li>
        <li class='tab-btn' >2.<a href="#2" id="opislink_1"> Два</a><span style="font-weight:bold"> два</span></li>
        <li class='tab-btn'>3.<a href="#3" id="opislink_2"> Три <span style="font-weight:bold"> три</span></a></li>
</ul>
<div id='opis0' class='opis'>
//
</div>
<div id='opis1' class='opis'>
// // //
</div>
<div id='opis2' class='opis'>
// // // // // //
</div>

CSS

<style>
.opis{display: none;}
.show{display: block;}
</style>

JS

<script>
    var buttons = document.querySelectorAll('.tab-btn');
    for( var i= 0; i<buttons.length; i++){

        var button = buttons[i];
        button.addEventListener('click', function () {
            var tabs = document.querySelectorAll('.opis');
            for( var j = 0; j<tabs.length; j++){
                var tab = tabs[j];
                tab.classList.remove('show');
            }
            var showDivId = this.querySelector('a').id.split('_')[1];
            document.querySelector('#opis' + showDivId).classList.add('show');
        });
    }
    </script>

Поправил. Работает

Comments

[myaurizio]

Спасибо за ответ, не силён в js, можете подсказать как связать в отношении моего кода?

[Comsequent]

myaurizio, покажите, пожалуйста, Ваш html. И скажите, что нужно прятать/показывать.

[myaurizio]

<ul>
	    <li>1.<a href="#1" onclick="function_name(this); return false;" id="opislink0"> Один <span style="font-weight:bold">раз</span></a></li>
        <li>2.<a href="#2" onclick="function_name(this); return false;" id="opislink1"> Два</a><span style="font-weight:bold"> два</span></li>
        <li>3.<a href="#3" onclick="function_name(this); return false;" id="opislink2"> Три <span style="font-weight:bold"> три</span></a></li>
		
		</ul>
		
		<div id="opis0">
		
	<h1 id="1">Заголовок 1</h1>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

</div>

<div id="opis1">
	<h1 id="1">Заголовок 2</h1>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

</div>
<div id="opis2">
	<h1 id="1">Заголовок 3</h1>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

</div>

[myaurizio]

К сожалению не работает код(((

[Comsequent]

myaurizio, все ещё не работает???
Можете показать ошибку в консоли?

[myaurizio]

Comsequent, взял решение Firsov36, Ваш код более не тестил