Я хочу, чтобы div был скрыт в начале (m_royal и m_suite). Затем, когда я нажимаю, просто отображается тот, который должен быть видимым, и скрывать остальную часть div. Проблема в том, что он просто работает, когда я перезагружаю свою страницу.
JS
$(document).ready(function(){
$(".contExp .post div").hide();
$('.contExp .post a').click(function(){
$(".contExp .post div").hide();
var id = $(this).attr('id');
id = id.split('_');
$(".contExp .post #m_"+id).show();
});
});
CSS
.contExp .post{font-size: 12px; margin-left: 5px; color:#505050;}
.contExp .post a{cursor:pointer;}
HTML
<div class="contExp">
<div class='post'>
<a id='royal'>+/- Detail</a>
<div id='m_royal'>
-- Content to show 1
</div>
</div>
<div class='post'>
<a id='suite'>+/- Detail</a>
<div id='m_suite'>
-- Content to show 2
</div>
</div>
</div>
Вы почти там, попробуйте этот код:
$(document).ready(function(){
$(".contExp .post div").hide();
$('.contExp .post a').click(function(){
$(this).parent().find('div').toggle();
});
});
или проверьте эту скрипту: http://jsfiddle.net/C9D2J/1/
Как только вы нажмете на элемент <a>
, он будет искать внутри него родительский элемент для div и переключить его. toggle() позволяет вам показать или скрыть элемент в зависимости от текущего состояния элемента, поэтому, если он будет скрыт, он покажет его, если он уже будет виден, он скроет его.