Collapsing Widget
How do I make an collapsing widget?
What is a collapsing widget? How do you make a collapsing widget? This script and codes were developed by Eric Rogg on 24 August 2022, Wednesday.
Collapsing Widget - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Collapsing Widget</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="span6"> <h3 class="box-header"><i class="fontawesome-bullhorn" style="margin-right:10px;"></i>Support tickets</h3> <div class="box widget-support-tickets"> <div class="ticket"> <span class="label label-success">Completed</span> <a href="#" title="">Server unavaible<span>[#201798]</span></a> <img alt= "Avatar" src= "http://adminflare-130.herokuapp.com/assets/images/avatar.png"> <span class="opened-by">Opened by <a href="#" title="">First User</a><br> Jan 28, 2012 10:24</span> </div> <div class="ticket"> <span class="label label-warning">Pending</span> <a href="#" title="">Mobile App Problem<span>[#201797]</span></a> <img alt= "Avatar" src= "http://adminflare-130.herokuapp.com/assets/images/avatar.png"> <span class="opened-by">Opened by <a href="#">Second User</a><br> Jan 28, 2012 10:24</span> </div> <div class="ticket"> <span class="label label-info">In progress</span> <a href="#" title="">PayPal issue<span>[#201796]</span></a> <img alt= "Avatar" src= "http://adminflare-130.herokuapp.com/assets/images/avatar.png"> <span class="opened-by">Opened by <a href="#">Third User</a><br> Jan 28, 2012 10:24</span> </div> <div class="ticket"> <span class="label label-important">Rejected</span> <a href="#" title="">IE7 problem<span>[#201795]</span></a> <img alt= "Avatar" src= "http://adminflare-130.herokuapp.com/assets/images/avatar.png"> <span class="opened-by">Opened by <a href="#">Fourth User</a><br> Jan 28, 2012 10:24</span> </div> <div class="ticket"> <span class="label label-success">Completed</span> <a href="#" title="">Server unavaible<span>[#201794]</span></a> <img alt= "Avatar" src= "http://adminflare-130.herokuapp.com/assets/images/avatar.png"> <span class="opened-by">Opened by <a href="#">Fifth User</a><br> Jan 28, 2012 10:24</span> </div> <div class="widget-actions"> <a class="btn btn-small" href="#" title="">Show more</a> </div> </div> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Collapsing Widget - Script Codes CSS Codes
@import url(http://weloveiconfonts.com/api/?family=entypo|fontawesome);
/* entypo */
[class*=entypo-]:before { font-family: entypo, sans-serif; font-style: normal;
}
/* fontawesome */
[class*=fontawesome-]:before { font-family: FontAwesome, sans-serif; font-style: normal;
}
/* GLOBAL STYLE */
body { font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 13px; line-height: 20px; color: #444; background-color: #f1f1f1;
}
h3 { font-size: 22.75px; line-height: 40px; margin: 10px 0; display: block; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0; -webkit-margin-end: 0;
}
a,input,button { outline: 0 !important;
}
a { color: #08c; text-decoration: none;
}
/* WIDGET STYLE */
/* Header */
.span6 { width: 528px;
}
.pull-right { float: right;
}
.box-header{ backface-visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden;
}
/* Widget Body */
.widget-support-tickets .ticket { padding: 11px 0 13px; border-bottom: 1px solid rgba(0,0,0,0.08);
}
.widget-support-tickets .ticket:first-child { padding-top: 0;
}
.widget-support-tickets .ticket>a { display: block; font-size: 14px; padding: 0 90px 0 0;
}
.widget-support-tickets .ticket>a i { display: inline-block; font-size: 11px; margin: 0 5px 0 0; top: -1px; position: relative; text-decoration: none;
}
.widget-support-tickets .ticket>a span { color: #bbb; display: inline-block; font-size: 13px; margin-left: 5px;
}
.widget-support-tickets .ticket>a:hover span { text-decoration: none;
}
.widget-support-tickets .ticket .label { display: block; float: right; margin: 3px 0 -23px; position: relative;
}
.widget-support-tickets .ticket img { display: inline-block; height: 30px; margin-right: 5px; margin-top: -18px; width: 30px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
}
.widget-support-tickets .ticket .opened-by,.widget-support-tickets .ticket .opened-by a { color: #888; font-size: 13px; line-height: 17px;
}
.widget-support-tickets .ticket .opened-by { display: inline-block; margin-top: 3px;
}
.widget-support-tickets .ticket .opened-by a:hover { color: #444;
}
.box.widget-support-tickets .ticket,.box .widget-support-tickets .ticket { margin: 0 -20px; padding-left: 20px; padding-right: 20px;
}
[class^=icon-]:before,[class*=" icon-"]:before { text-decoration: inherit; display: inline-block; speak: none;
}
[class^=icon-],[class*=" icon-"] { font-family: FontAwesome; font-weight: 400; font-style: normal; text-decoration: inherit; -webkit-font-smoothing: antialiased;
}
.text-error {
color: #b85355;
}
img { max-width: 100%; width: auto\9; height: auto; vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic;
}
.box { display: block; background-color: #fff; margin: 0 0 20px; padding: 20px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; zoom: 1; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: 0 1px 0 1px #e4e6eb; -moz-box-shadow: 0 1px 0 1px #e4e6eb; box-shadow: 0 1px 0 1px #e4e6eb; margin: 0 0 30px;
}
.box:before,.box:after { display: table; content: ""; line-height: 0;
}
.box:after { clear: both;
}
.box.no-border { background: 0; border: 0; padding: 10px 0 20px 10px;
}
.box.no-padding { padding: 0 !important;
}
.box-header { background: #36a9e1; color: #fff; font-size: 16px; font-weight: 300; padding: 10px 20px; line-height: 20px; margin-bottom: 0; padding-bottom: 10px; text-transform: capitalize;
}
.box-header>i { display: inline-block; font-size: 17px; width: 20px;
}
.box-header:hover .box-collapse { opacity: 1; filter: alpha(opacity=100);
}
.box-collapse,.box-expand { color: #fff; font-size: 17px; font-weight: 600; margin: 2px 0; position: relative; text-transform: none;
}
.box-collapse:hover,.box-expand:hover { color: #fff; text-decoration: none;
}
.box-collapse { opacity: .3; filter: alpha(opacity=30); -webkit-transition: opacity .2s; -moz-transition: opacity .2s; -o-transition: opacity .2s; transition: opacity .2s;
}
.box-collapse i { position: relative; top: -1px;
}
.box-wide { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px;
}
.box-no-bottom-padding { margin-bottom: -20px;
}
.box .widget-actions { margin: 0 -20px -20px; padding: 15px 20px;
}
.widget-actions { background: rgba(0,0,0,0.03); display: block; padding: 15px 0; text-align: right;
}
.box-no-bottom-padding .widget-actions { margin-bottom: 0;
}
/* BUTTON */
.btn { display: inline-block; outline: 0 !important; color: #777; text-shadow: 0 0 0 rgba(0,0,0,.25); background-color: #efefef; background-image: none; box-shadow: none; background-repeat: repeat-x; border-color: none; border-width: 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; margin-bottom: 5px; -webkit-box-shadow: 0 2px 0 #dedede; box-shadow: 0 2px 0 #dedede; -webkit-transition: all .1s ease-in-out 0; -moz-transition: all .1s ease-in-out 0; -o-transition: all .1s ease-in-out 0; transition: all .1s ease-in-out 0;
}
.btn:hover,.btn:focus,.btn:active,.btn.active,.btn.disabled,.btn[disabled] { background-color: #e6e6e6; color: #777;
}
.btn:active,.btn.active { -webkit-transform: translateY(2px); -moz-transform: translateY(2px); -o-transform: translateY(2px); -ms-transform: translateY(2px); transform: translateY(2px);
}
.btn-small { font-size: 11.9px;
}
.btn-small { padding: 2px 10px; font-size: 11.9px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
}
.btn-small [class^=icon-],.btn-small [class*=" icon-"] { margin-top: 0;
}
/* labels */
.label { background-color: #bcbcbc; font-size: 12px; font-weight: 700; padding: 2px 5px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; cursor:default;
}
.label.label-green,.label.label-success { background-color: #9bb921; opacity:0.5; -webkit-transition: opacity .2s; -moz-transition: opacity .2s; -o-transition: opacity .2s; transition: opacity .2s;
}
.label.label-green:hover,.label.label-success:hover { opacity:1; -webkit-transition: opacity .2s; -moz-transition: opacity .2s; -o-transition: opacity .2s; transition: opacity .2s;
}
.label.label-blue { background-color: #3f89de; opacity:0.5; -webkit-transition: opacity .2s; -moz-transition: opacity .2s; -o-transition: opacity .2s; transition: opacity .2s;
}
.label.label-blue:hover { opacity:1; -webkit-transition: opacity .2s; -moz-transition: opacity .2s; -o-transition: opacity .2s; transition: opacity .2s;
}
.label.label-orange,.label.label-warning { background-color: #f3a139; opacity:0.5; -webkit-transition: opacity .2s; -moz-transition: opacity .2s; -o-transition: opacity .2s; transition: opacity .2s;
}
.label.label-orange:hover,.label.label-warning:hover { opacity:1; -webkit-transition: opacity .2s; -moz-transition: opacity .2s; -o-transition: opacity .2s; transition: opacity .2s;
}
.label.label-cyan,.label.label-info { background-color: #63c0c8; opacity:0.5; -webkit-transition: opacity .2s; -moz-transition: opacity .2s; -o-transition: opacity .2s; transition: opacity .2s;
}
.label.label-cyan:hover,.label.label-info:hover { opacity:1; -webkit-transition: opacity .2s; -moz-transition: opacity .2s; -o-transition: opacity .2s; transition: opacity .2s;
}
.label.label-red,.label.label-important { background-color: #dc6343; opacity:0.5; -webkit-transition: opacity .2s; -moz-transition: opacity .2s; -o-transition: opacity .2s; transition: opacity .2s;
}
.label.label-red:hover,.label.label-important:hover { opacity:1; -webkit-transition: opacity .2s; -moz-transition: opacity .2s; -o-transition: opacity .2s; transition: opacity .2s;
}
.label, badge { display: inline-block; padding: 4px 9px; font-size: 9px; text-transform:uppercase; letter-spacing:2px; font-weight: 300; line-height: 14px; color: #fff; vertical-align: baseline; white-space: nowrap; background-color: #999;
}
Collapsing Widget - Script Codes JS Codes
$(document).ready(function() { $("#on-top-link").click(function() { $("body,html").animate({ scrollTop: 0 }, 800); return false }); $(".box-header").each(function() { var b = $(this).next(); if (b.hasClass("box") && !b.hasClass("non-collapsible")) { $(this).append('<a href="#" class="box-collapse pull-right"> <i class="fontawesome-caret-up"></i></a>').append('<a href="#" class="box-expand pull-right" style="display: none"> <i class="fontawesome-caret-down"></i></a>') } }); $(document).on("click", "a.box-collapse", function() { var b = $(this).hide(100, "linear"); b.parent(".box-header").next(".box").slideUp(400, function() { $(".box-expand", b.parent(".box-header")).show(100, "linear") }); return false }).on("click", "a.box-expand", function() { var b = $(this).hide(100, "linear"); b.parent(".box-header").next(".box").slideDown(400, function() { $(".box-collapse", b.parent(".box-header")).show(100, "linear") }); return false })
});
Developer | Eric Rogg |
Username | er40 |
Uploaded | August 24, 2022 |
Rating | 3 |
Size | 4,279 Kb |
Views | 38,456 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
CTA | 2,367 Kb |
Sign Up Form | 2,373 Kb |
A Pen by Eric Rogg | 2,795 Kb |
JQuery Progress Bar22 | 6,701 Kb |
CSS Search Hover Animation | 1,676 Kb |
Simple List | 2,001 Kb |
Widget | 5,735 Kb |
Casestudy | 3,080 Kb |
Header | 1,542 Kb |
Profile CSS Hover Effect | 4,632 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
CSS Link Zoom On Click | Bryce | 1,960 Kb |
Contact | GanNichiHa | 2,514 Kb |
Simple Weather App | Cmwebby | 0 Kb |
Text Blocks Over Image, Updated | KatieK2 | 3,122 Kb |
Brian The CSS Bee | Jonitrythall | 3,922 Kb |
React TODO | Enieste | 3,320 Kb |
CSS eye follow | Pedrocampos | 2,592 Kb |
A Pen by Bryan Rojas | Bryanrojas | 1,873 Kb |
Animated rainbow wave on canvas | Icodeforlove | 2,777 Kb |
Animated bar chart | CreativePunch | 3,124 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!