Collapsing Widget

Developer
Eric Rogg
Size
4,279 Kb
Views
38,456
  1. Collapsing Widget Previews
  2. Collapsing Widget HTML Codes
  3. Collapsing Widget CSS Codes
  4. Collapsing Widget JS Codes

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 Previews
IQ Test

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">&nbsp;&nbsp;<i class="fontawesome-caret-up"></i></a>').append('<a href="#" class="box-expand pull-right" style="display: none">&nbsp;&nbsp;<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 })
});
Collapsing Widget - Script Codes
Collapsing Widget - Script Codes
Home Page Home
Developer Eric Rogg
Username er40
Uploaded August 24, 2022
Rating 3
Size 4,279 Kb
Views 38,456
Do you need developer help for Collapsing Widget?

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!

Eric Rogg (er40) Script Codes
Name
Cool Radio
Pattern Library
CTA
Widget
Simple List
Profile CSS Hover Effect
Simple Animated Buttons Inspired by Material Design
Sign Up Form
Checkbox
A Pen by Eric Rogg
Create amazing art & images with AI!

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!