<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 /> <div class="row DivLeftInside"> <div title="Conclusion"><strong>Conclusion: </strong> Donec lorem nulla, scelerisque vel cursus at, ullamcorper eu orci. Donec vitae blandit leo. Quisque in quam condimentum, maximus justo sit amet, pellentesque ipsum. Ut consequat non neque vitae consequat. Nulla a interdum lectus, at fringilla justo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer ac turpis pellentesque, aliquet arcu nec, auctor lectus. Integer dui justo, malesuada id enim ac, fringilla laoreet elit. Integer posuere molestie rutrum. Vivamus dictum leo vel erat porttitor, tempus sagittis turpis suscipit. Aenean porttitor, neque quis rutrum mollis, arcu urna cursus ante, in pretium mauris turpis nec neque. Nulla convallis fermentum condimentum. </div> </div> </div> <div class="col-md-2 col-sm-12 col-xs-12"> </div> <div class="row DivLeftInside"> <div class="card"> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li> <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li> <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li> </ul> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> <div role="tabpanel" class="tab-pane" id="profile">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div> <div role="tabpanel" class="tab-pane" id="messages">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> <div role="tabpanel" class="tab-pane" id="settings">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passage..</div> </div> </div> </div> </div> </div> </div> <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="175" 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 /> <div class="row DivLeftInside"> <div title="Conclusion"><strong>Conclusion: </strong> Donec lorem nulla, scelerisque vel cursus at, ullamcorper eu orci. Donec vitae blandit leo. Quisque in quam condimentum, maximus justo sit amet, pellentesque ipsum. Ut consequat non neque vitae consequat. Nulla a interdum lectus, at fringilla justo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer ac turpis pellentesque, aliquet arcu nec, auctor lectus. Integer dui justo, malesuada id enim ac, fringilla laoreet elit. Integer posuere molestie rutrum. Vivamus dictum leo vel erat porttitor, tempus sagittis turpis suscipit. Aenean porttitor, neque quis rutrum mollis, arcu urna cursus ante, in pretium mauris turpis nec neque. Nulla convallis fermentum condimentum. </div> </div> </div> <div class="col-md-2 col-sm-12 col-xs-12"> </div> <div class="row DivLeftInside"> <div class="card"> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li> <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li> <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li> </ul> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> <div role="tabpanel" class="tab-pane" id="profile">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div> <div role="tabpanel" class="tab-pane" id="messages">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> <div role="tabpanel" class="tab-pane" id="settings">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passage..</div> </div> </div> </div> </div> </div> </div> <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="176" 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 /> <div class="row DivLeftInside"> <div title="Conclusion"><strong>Conclusion: </strong> Donec lorem nulla, scelerisque vel cursus at, ullamcorper eu orci. Donec vitae blandit leo. Quisque in quam condimentum, maximus justo sit amet, pellentesque ipsum. Ut consequat non neque vitae consequat. Nulla a interdum lectus, at fringilla justo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer ac turpis pellentesque, aliquet arcu nec, auctor lectus. Integer dui justo, malesuada id enim ac, fringilla laoreet elit. Integer posuere molestie rutrum. Vivamus dictum leo vel erat porttitor, tempus sagittis turpis suscipit. Aenean porttitor, neque quis rutrum mollis, arcu urna cursus ante, in pretium mauris turpis nec neque. Nulla convallis fermentum condimentum. </div> </div> </div> <div class="col-md-2 col-sm-12 col-xs-12"> </div> <div class="row DivLeftInside"> <div class="card"> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li> <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li> <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li> </ul> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> <div role="tabpanel" class="tab-pane" id="profile">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div> <div role="tabpanel" class="tab-pane" id="messages">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> <div role="tabpanel" class="tab-pane" id="settings">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passage..</div> </div> </div> </div> </div> </div> </div> </div>

/* 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; cursor:pointer; } .AppearDiv{ display:none; height:530px; float:left; } .nav-tabs { border-bottom: 2px solid #DDD; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { border-width: 0; background-color:#a3e1a2 !important; } .nav-tabs > li > a { border: none; color: #000; background-color: #4d7a44; } .nav-tabs > li.active > a, .nav-tabs > li > a:hover { border: none; color: #0060FF !important; background-color:#a3e1a2 !important; } .nav-tabs > li > a::after { content: ""; height: 2px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; transform: scale(0); } .nav-tabs > li.active > a::after, .nav-tabs > li:hover > a::after { transform: scale(1); } .tab-nav > li > a::after { color: #fff; } .tab-pane { padding: 15px 0; } .tab-content{ padding:20px; background-color:#5e8856; } .card { margin-bottom: 30px; color:#e9e8e7; margin-left: 15px; margin-right: 15px; }

/* 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(); }); });