Я просто надеюсь, что мои знания Javascript - это плохая мысль, и я не могу работать над этим.
У меня есть код Javascript, который расширяет контакт при нажатии ссылки, однако в настоящее время контакт видим по умолчанию, и я хочу, чтобы он был скрыт до щелчка ссылки, каких-либо идей?
Jsfiddle: http://jsfiddle.net/p7Ebh/
JS
$("a.box-toggle").on('click', function () {
$('div.box-content').slideToggle(200).toggleClass('active');
});
HTML
<section class="box2">
<header class="box-head">
<div class="box-title fr"> <span class="box-icon"></span>
<h3 class="box-title-text">Title Title</h3>
</div> <a class="box-toggle fl active" href="#">A</a>
</header>
<div class="box-content active">
<img src="http://carryingthegun.files.wordpress.com/2012/09/personal_trollface_hd.png" alt="" width="200" height="200" />Content or collapsing data goes here</div>
</section>
CSS
.widget-toggle {
display: block;
overflow: hidden;
text-indent: -9999px;
width: 18px;
height: 9px;
margin-top: 15px;
margin-left: 13px;
background: url(../img/sidebar-arrows.png) no-repeat 0 -18px;
}
.widget-toggle.active {
background: url(../img/sidebar-arrows.png) no-repeat 0 0;
}
Заранее спасибо!
используя .hide()
вы можете сделать невидимым содержимое div при загрузке страницы, а затем появляться только тогда, когда пользователь нажимает на ссылку.
попробуй это:
$('div.box-content').hide();
$("a.box-toggle").on('click', function () {
$('div.box-content').slideToggle(200).toggleClass('active');
});
Другим решением является использование только CSS без использования .hide()
в jQuery следующим образом:
.box-content{
display:none;
}
вы также можете добавить display:none
в .box-content
css:
.box-content{
display:none;
}
использовать.hide() в jquery
$(".box-content ").hide();
Почему вы не используете .hide()
на document.ready??
$('div.box-content').hide();
$("a.box-toggle").on('click', function () {
$('div.box-content').slideToggle(200).toggleClass('active');
});