<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">Выберите группу пользователей или пользователя:</div>
<div class="panel-body">
<ul class="treeview">
<li><a href="#">Группы и пользователи</a>
<ul>
<li><a href="#">Филиалы</a>
<ul>
<li><a href="#">Сретенский</a>
<ul>
<li class="active"><a href="#" style="color: blue;">Филиал № 26. Большой Сухаревский переулок, 25</a></li>
<li><a href="#">Филиал № 82. Селивёрстов переулок, 10с2</a></li>
<li><a href="#">Филиал № 147. 1-й Неопалимовский переулок, 16/13</a></li>
</ul>
</li>
<li><a href="#">Плющиха</a>
<ul>
<li><a href="#">Филиал № 61. улица Плющиха, 37/21</a></li>
<li><a href="#">Филиал № 152. улица Бурденко, 24</a></li>
<li><a href="#">Филиал № 79. Пушкарёв переулок, 19</a></li>
</ul>
</li>
<li><a href="#">Мещанский</a>
<ul>
<li><a href="#">Филиал № 24. улица Гиляровского, 37с1</a></li>
<li><a href="#">Филиал № 63. проспект Мира, 21</a></li>
<li><a href="#">Филиал № 117. проспект Мира, 26с6</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-6">
<div class="panel panel-default" style="padding: 0 16px;">
<div class="panel-body">
<form role="form" class="form-horizontal">
<div class="form-group">
<h4 style="color: blue;" id="title">Филиал № 26. Большой Сухаревский переулок, 25</h4>
</div>
<div class="form-group">
<input type="text" class="form-control" id="inputSubject" placeholder="Заголовок"/>
</div>
<div class="form-group">
<textarea class="form-control counted" name="message" placeholder="Введите сообщение" rows="5" style="margin-bottom:10px;"></textarea>
<h6 class="pull-right" id="counter">10 000 символов осталось</h6>
<button class="btn btn-info" type="submit">Отправить сообщение</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
div.panel:first-child {
margin-top:20px;
}
div.treeview {
min-width: 100px;
min-height: 100px;
max-height: 256px;
overflow:auto;
padding: 4px;
margin-bottom: 20px;
color: #369;
border: solid 1px;
border-radius: 4px;
}
div.treeview ul:first-child:before {
display: none;
}
.treeview, .treeview ul {
margin:0;
padding:0;
list-style:none;
color: #369;
}
.treeview ul {
margin-left:1em;
position:relative
}
.treeview ul ul {
margin-left:.5em
}
.treeview ul:before {
content:"";
display:block;
width:0;
position:absolute;
top:0;
left:0;
border-left:1px solid;
/* creates a more theme-ready standard for the bootstrap themes */
bottom:15px;
}
.treeview li {
margin:0;
padding:0 1em;
line-height:2em;
font-weight:700;
position:relative
}
.treeview ul li:before {
content:"";
display:block;
width:10px;
height:0;
border-top:1px solid;
margin-top:-1px;
position:absolute;
top:1em;
left:0
}
.tree-indicator {
margin-right:5px;
cursor:pointer;
}
.treeview li a {
text-decoration: none;
color:inherit;
cursor:pointer;
}
.treeview li button, .treeview li button:active, .treeview li button:focus {
text-decoration: none;
color:inherit;
border:none;
background:transparent;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
outline: 0;
}
/**
* BootTree Treeview plugin for Bootstrap.
*
* Based on BootSnipp TreeView Example by Sean Wessell
* URL: http://bootsnipp.com/snippets/featured/bootstrap-30-treeview
*
* Revised code by Leo "LeoV117" Myers
*
*/
$.fn.extend({
treeview: function() {
return this.each(function() {
// Initialize the top levels;
var tree = $(this);
tree.addClass('treeview-tree');
tree.find('li').each(function() {
var stick = $(this);
});
tree.find('li').has("ul").each(function () {
var branch = $(this); //li with children ul
branch.prepend("<i class='tree-indicator glyphicon glyphicon-chevron-right'></i>");
branch.addClass('tree-branch');
branch.on('click', function (e) {
if (this == e.target) {
var icon = $(this).children('i:first');
icon.toggleClass("glyphicon-chevron-down glyphicon-chevron-right");
$(this).children().children().toggle();
}
})
//branch.children().children().toggle();
/**
* The following snippet of code enables the treeview to
* function when a button, indicator or anchor is clicked.
*
* It also prevents the default function of an anchor and
* a button from firing.
*/
branch.children('.tree-indicator, button, a').click(function(e) {
branch.click();
e.preventDefault();
});
});
});
}
});
/**
* The following snippet of code automatically converst
* any '.treeview' DOM elements into a treeview component.
*/
$(window).on('load', function () {
$('.treeview').each(function () {
var tree = $(this);
tree.treeview();
})
$('.treeview a').on('click', function (e) {
//alert($(this).html())
$('#title').html($(this).html())
})
})