Warning Message

by Dhanck

HTML

<div class="alert alert-danger alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span>
    </button> <strong>Warning!</strong> Better check yourself, you're not looking too good.
    <div class="more pull-right">more details...</div>
    <div class="moreStl" style="display:none;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud</div>
</div>
<div class="alert alert-danger alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span>
    </button> <strong>Warning!</strong> Better check yourself, you're not looking too good.
    <div class="more pull-right">more details...</div>
    <div class="moreStl" style="display:none;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud</div>
</div>

CSS

body {
    margin:30px;
}
.more {
    color:#6B6B65;
    font-size:12px;
    cursor:pointer;
    margin-top:3px;
}
.moreStl {
    color:#6B6B65;
    font-size:12px;
}

JavaScript

$(".more").click(function () {
    $(this).next().toggle();
    $(this).next().next().toggle();
});