Как сделать в Bootstrapе вкладки так, чтобы они открывались и закрывались по нажатию?

Question

[Alexander Karpov]

Я не особо дружу со скриптами по этому решил спросить у вас уважаемые)

Как все будет работать проще показать на примере

код идентичен бутстрапу getbootstrap.com/javascript/#tabs

и вот сам код

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
   <li>
      <a href="#home" role="tab" data-toggle="tab">
         <div class="thumbnail">
            <img src="img/photo.png" alt=" ">
            <div class="caption">
               <h3>Яненко Евгений Александрович</h3>
               <p>Менеджер по работе со 
                  страховыми компаниями
               </p>
            </div>
         </div>
         Подробнее
      </a>
   </li>
   <li>
      <a href="#profile" role="tab" data-toggle="tab">
         <div class="thumbnail">
            <img src="img/photo.png" alt="...">
            <div class="caption">
               <h3>Яненко Евгений Александрович</h3>
               <p>Менеджер по работе со 
                  страховыми компаниями
               </p>
            </div>
         </div>
         Подробнее
      </a>
   </li>
   <li>
      <a href="#messages" role="tab" data-toggle="tab">
         <div class="thumbnail">
            <img src="img/photo.png" alt="...">
            <div class="caption">
               <h3>Яненко Евгений Александрович</h3>
               <p>Менеджер по работе со 
                  страховыми компаниями
               </p>
            </div>
         </div>
         Подробнее
      </a>
   </li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
   <div class="tab-pane  fade " id="home">
      <p><b>Образование, ученые степени:</b></p>
      <ul class="list">
         <li>внесен в единый реестр ответственных актуариев ;</li>
         <li>профессор по кафедре «Высшая математика», 1997;</li>
         <li>доктор физико-математических наук, 1995;</li>
         <li>докторантура МГТУ им. Н.Э. Баумана, 1995;</li>
         <li>кандидат технических наук, 1986;</li>
         <li>Калининский государственный университет, специальность – математика, 1982;</li>
         <li>Московский автомобильно-дорожный институт, специальность – автомобильный транспорт, 1977.</li>
      </ul>
   </div>
   <div class="tab-pane fade" id="profile">
      <p><b>Образование, ученые степени:</b></p>
      <ul class="list">
         <li>внесен в единый реестр ответственных актуариев ;</li>
         <li>профессор по кафедре «Высшая математика», 1997;</li>
         <li>доктор физико-математических наук, 1995;</li>
         <li>докторантура МГТУ им. Н.Э. Баумана, 1995;</li>
         <li>кандидат технических наук, 1986;</li>
         <li>Калининский государственный университет, специальность – математика, 1982;</li>
         <li>Московский автомобильно-дорожный институт, специальность – автомобильный транспорт, 1977.</li>
      </ul>
   </div>
   <div class="tab-pane fade" id="messages">
      <p><b>Образование, ученые степени:</b></p>
      <ul class="list">
         <li>внесен в единый реестр ответственных актуариев ;</li>
         <li>профессор по кафедре «Высшая математика», 1997;</li>
         <li>доктор физико-математических наук, 1995;</li>
         <li>докторантура МГТУ им. Н.Э. Баумана, 1995;</li>
         <li>кандидат технических наук, 1986;</li>
         <li>Калининский государственный университет, специальность – математика, 1982;</li>
         <li>Московский автомобильно-дорожный институт, специальность – автомобильный транспорт, 1977.</li>
      </ul>
   </div>
</div>

По началу все вкладки будут закрыты, при нажатие на любую из вкладок она выползает, но если на нее нажать еще раз она закроется, ну и + нужно оставить функцию которая при нажатии на другую вкладку закрывает предыдущую.
надеюсь что все объяснил нормально)

Answer 1

[KorsaR-ZN]

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

UPD
Добавьте следующий код на страницу

<script type="text/javascript">
$(document).ready(function()
{
	$('#contactTab a').click(function()
	{
		var that = $(this),
		    parent = that.parent();
			
		$('#contactTab a span.text').text('Подробнее');
	
		if(parent.is('.active'))
		{
			$(that.attr('href')).removeClass('active').addClass('fade');
			that.parent().removeClass('active');
		}
		else
		{
			that.find('span.text').text('Закрыть');
			that.tab('show');
		}
	
		return false;
	
	});
});
</script>

A у элемента <ul class="nav nav-tabs" role="tablist">,
добавьте туда id="contactTab"

А слова "подробнее" обернуть так:
<span class="text">Подробнее</span>

Comments

[Alexander Karpov]

аааа то что нужно! спасыыыбо
а такой еще вопрос) а как заменять текст подробнее и закрыть)?

[Alexander Karpov]

если к примеру подробнее вставить в span или в любой другой тег

[KorsaR-ZN]

@AlexAstro Смотри обновленный ответ

[Alexander Karpov]

@KorsaR-ZN обновил, но дело в том что если перейти на вкладку и не закрывая ее перейти на другую, то слово в спане не меняется, т.е. как было закрыть так и осталось

[KorsaR-ZN]

@AlexAstro Я обновил код еще раз, ты старую версию взял :)

[Alexander Karpov]

@KorsaR-ZN +1 к карме. Еще раз огромное спасибо!!! прям приогромное =)

Answer 2

[Дима Паутов]

Я так понимаю речь идет о вкладках которые под картинкой, так вот, все работает отлично и скачивается все тоже отлично. Может я не там смотрю?

Comments

[Alexander Karpov]

вы не так поняли

[Дима Паутов]

Ок, значит дело в картинке. Сюда бы лучше целый пример, а не картинку. Иначе как понять в чем проблема, не видя исходный код?

[Alexander Karpov]

код из будстрапа getbootstrap.com/javascript/#tabs

[Дима Паутов]

Ответ пользователь KorsaR-ZN говорит сам за себя!