$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') === this.pathname.replace(/^\//, '') && location.hostname === this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
$('a[href*=#]:not([href=#])').click(function(e) {
if (location.pathname.replace(/^\//, '') === this.pathname.replace(/^\//, '') && location.hostname === this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
e.preventDefault();
}
}
});
<!-- Include Twitter Bootstrap and jQuery: -->
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
VK.Widgets.Group("vk_groups", {mode: 0, width: "600"
<?php
$categories = [
[
"Категория1",
"next" => [
16 => "Подкатегория16",
19 => "Подкатегория19"
]
],
[
"Категория2",
"next" => [
23 => "Подкатегория23",
24 => "Подкатегория24",
26 => "Подкатегория26",
27 => "Подкатегория27"
]
],
[
"Категория3",
"next" => [
29 => "Подкатегория29",
30 => "Подкатегория30",
31 => "Подкатегория31"
]
]
];
?>
<div class="container">
<h1>Как мне задействовать bootsrap'овский collapse</h1>
<? if(is_array($categories)):?>
<div class="panel-group" id="accordion">
<? foreach($categories as $key=>$value):?>
<div class="panel panel-default">
<? if($value['next']):?>
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#categoryCollapse<?=$key?>">
<?=$value[0];?>
</a>
</h4>
</div>
<div id="categoryCollapse<?=$key?>" class="panel-collapse collapse<?=$key==0?" in":""?>">
<div class="panel-body">
<? foreach($value['next'] as $k=>$v):?>
<div style="padding-left:10px">• <a href="?action=categories&id_cat=<?=$k?>" style="font-size:14px; color:#34495e"><?=$v;?></a></div>
<? endforeach;?>
</div>
</div>
<? endif;?>
</div>
<? endforeach;?>
</div>
<? endif;?>
</div>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="navbar-header pull-right">
<ul class="nav navbar-nav nav-pills pull-left">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
<button data-target="#myNavbar" data-toggle="collapse" class="navbar-toggle" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</div>
</nav>