Скрыть div на клик и показать еще один div?

Question

У меня есть ботстрап модальный. В этом модале есть две вкладки начальной загрузки. Кнопка «Работа» - это активная вкладка. Кнопка «Hire» - это другая вкладка. Это модальное обматывают .col-мкр-8 класса с этими стилями

@media (min-width: 992px) { 
    .col-md-8 { 
     width: 87%; 
     margin-top: 37px; 
     margin-bottom: 31px; 
    } 
    } 

Проблема заключается в том, что «Сниму» содержание вкладки имеет большую ширину, чем «Work» содержание. Так что он смотрит на него.

мне нужно показать «Сниму» закладка исходной ширины, когда кто-то нажмите кнопку «Сниму» вкладку. Я знаю, что это произошло, потому что я завернул класс .col-md-8. У вас нет возможности скрыть этот основной класс при щелчке и показать оригинальную ширину вкладки «Прокат»? Я использую метеорит и реагирую.

Answer 1

Вы можете увеличить ширину модального диалог путем добавления class.you можно добавить класс модальная Lg. то вы можете увеличить ширину модальности, щелкнув вкладку «Аренда».

Answer 2

Если вы хотите достичь этого, лучший способ - использовать jquery.

Вы должны предоставить идентификатор для работы, нанять кнопку и содержание работы и нанять-содержание.

, например.

HTML:

<button id="work-btn">Work</button> <button id="hire-btn">Hire</button> 
<div id="work-content"> The content goes here </div> 
<div id="hire-content"> The content goes here </div> 

CSS:

.hire-content { 
display:none; 
} 

Jquery:

$(document).ready(function(){ 
$("#hire-btn").click(function() { 
    $("#work-content").hide(); 
    $("#hire-content").show(); 
}); 
}); 

Надеется, что это помогает. Если у вас есть какие-либо вопросы, не стесняйтесь спрашивать.