Bootstrap Snippet Advanced List using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<!--
Author: Konrad Kurkowski
http://kurkowski.hpark.pl
20.11.2017
-->
<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading PanelHeading row">
            <div class="col-sm-6">
                <label>Name</label>
            </div>
            <div class="col-sm-6"></div>
        </div>
        <div class="panel-body PanelMainBody">
            <div class="col-md-10 col-sm-12 col-xs-12">
                <div class="DivLeft" title="Create Date">2017-01-14</div>
                <div class="DivLeft" title="Author">Author</div>
                <div class="DivLeft" title="Description"><strong>Description: </strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
            </div>
            <div class="col-md-2 col-sm-12 col-xs-12">
                <div class="PlusIcon" atr="174" title="Expand more">
                    <span class=" glyphicon glyphicon-plus" aria-hidden="true"></span>
                </div>
            </div>
            <div class="AppearDiv" id="RunAppearDiv174" style="display: none;">
                    <div class="col-md-10 col-sm-12 col-xs-12">
                        <br />
                        <div class="row DivLeftInside">
                            <div title="Note"><strong>Note: </strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec diam cursus, dignissim lorem ullamcorper, pellentesque arcu. Vivamus a porttitor magna, tempus molestie tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris quis quam sodales, dignissim risus eget, ornare risus. Integer dolor justo, sagittis id dui vitae, dignissim aliquam tellus. Morbi nisi libero, feugiat nec turpis vel, tincidunt consequat neque. Sed aliquam velit id velit suscipit condimentum. Vestibulum non tellus dolor. Nam pulvinar vitae neque vel porttitor. Morbi interdum quam eget nisl hendrerit tincidunt. Aenean rutrum justo a leo posuere, non varius ligula dapibus. Cras ut finibus nisi, aliquet dictum lectus. Mauris viverra eros ut odio tristique, id consequat nulla consequat. Fusce aliquet, mauris a feugiat placerat, elit est mollis tellus, vel commodo odio enim vel mi. Aliquam porttitor ipsum eget purus bibendum sodales. Cras turpis mauris, fermentum ut diam nec, porttitor tempor ipsum. </div>
                        </div>
                        <br/><br />
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*
Author: Konrad Kurkowski
http://kurkowski.hpark.pl
20.11.2017
*/
.PanelHeading{
    background-color:#a3e1a2 !important;
    color:#656568 !important;
    padding:5px 5px 5px 40px !important;
    margin-left:0px;
    margin-right:0px;   
}
.PanelMainBody{
    background-color:#5e8856;
    color:#e9e8e7;
    padding:5px !important;
}
.DivLeft{
    float:left;
    margin-left:20px;
    margin-right:20px;
}
.DivLeftInside{
    float:left;
    margin-left:20px;
    margin-right:20px;
    margin-bottom:20px;
}
.PlusIcon{
    float:right;
    padding-left:20px;
    padding-right:20px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*
Author: Konrad Kurkowski
http://kurkowski.hpark.pl
20.11.2017
*/
$(document).ready(function(){
    
    $(document).on('click', '.PlusIcon', function(){
        var temp = $(this).attr('atr');
        $('#RunAppearDiv' + temp).toggle();
    });
    
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Advanced List"
Bootstrap 3.0.0 Snippet by konkur4

Related: See More

Questions / Comments:

"Advanced List" Bootstrap 3.0.0 Snippet by konkur4

Related: See More

Questions / Comments:

"Advanced List"
Bootstrap 3.0.0 Snippet by konkur4