Skip to content

Instantly share code, notes, and snippets.

@gangadharjannu
Created March 9, 2015 14:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gangadharjannu/6f85be28fe7fbdf70158 to your computer and use it in GitHub Desktop.
Save gangadharjannu/6f85be28fe7fbdf70158 to your computer and use it in GitHub Desktop.
JS Bin // source http://jsbin.com/yesiwe
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
/*Common CSS reset*/
html, body {
margin: 0;
padding: 0;
}
* {
margin: 0;
padding: 0
}
bg-accordion {
display: block;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.bg-panel-group {
width: 100%;
background-color: #f3f3f3;
color: #777;
position: relative;
}
.bg-panel-title {
background-color: #ccc;
margin: 0px;
}
.bg-panel-title a {
color: #fff;
padding: 6px 12px;
display: block;
font-size: 12pt;
}
.bg-panel-title {
background-color: #389abe;
background-image: -moz-linear-gradient(top, #389abe 0%, #2a7b99 100%); /* FF3.6+ */
background-image: -webkit-gradient(linear, left top, left bottombottom, color-stop(0%,#389abe), color-stop(100%,#2a7b99)); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, #389abe 0%,#2a7b99 100%); /* Chrome10+,Safari5.1+ */
background-image: -o-linear-gradient(top, #389abe 0%,#2a7b99 100%); /* Opera 11.10+ */
background-image: -ms-linear-gradient(top, #389abe 0%,#2a7b99 100%); /* IE10+ */
background-image: linear-gradient(to bottombottom, #389abe 0%,#2a7b99 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#389abe', endColorstr='#2a7b99',GradientType=0 ); /* IE6-9 */
}
.bg-panel-title a {
text-shadow: 1px 1px 0px rgba(0,0,0,0.2);
text-shadow: 1px 1px 0px rgba(0,0,0,0.2);
border-right: 1px solid rgba(0, 0, 0, .2);
border-left: 1px solid rgba(0, 0, 0, .2);
border-bottom: 1px solid rgba(0, 0, 0, .2);
border-top: 1px solid rgba(250, 250, 250, .2);
}
.bg-panel-group .bg-panel-title .bg-panel-body {
padding: 0;
background: none;
border: none;
outline: none;
}
@media only screen and (min-width: 768px) {
.bg-menu-group {
}
.bg-panel {
width: auto;
min-width: 15%;
display: inline-block;
float: left;
white-space: nowrap;
}
.bg-panel-body {
display: block;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
position: absolute;
border: 1px solid #389abe;
left: 0;
}
h3 {
margin: 0
}
.bg-panel-body {
padding: 0 5px;
margin-top: -1px;
}
}
.bgActive {
background-color: #fa9300;
background-image: -moz-linear-gradient(top, #fa9300 0%, #dc621e 100%); /* FF3.6+ */
background-image: -webkit-gradient(linear, left top, left bottombottom, color-stop(0%,#fa9300), color-stop(100%,#dc621e)); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, #fa9300 0%,#dc621e 100%); /* Chrome10+,Safari5.1+ */
background-image: -o-linear-gradient(top, #fa9300 0%,#dc621e 100%); /* Opera 11.10+ */
background-image: -ms-linear-gradient(top, #fa9300 0%,#dc621e 100%); /* IE10+ */
background-image: linear-gradient(to bottombottom, #fa9300 0%,#dc621e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fa9300', endColorstr='#dc621e',GradientType=0 ); /* IE6-9 */
}
</style>
</head>
<body>
<div id="container">
<div ng-app="bgApp" ng-controller="myCtrl">
<bg-accordion type="menu-accordian" open-heading="tab3" open-bg-panel="2">
<bg-accordion-group heading="Tab1" content="<a href='www.google.com'>Link1</a>"></bg-accordion-group>
<bg-accordion-group heading="Tab2" content="Content2"></bg-accordion-group>
<bg-accordion-group heading="Tab3" >
Content3
</bg-accordion-group>
<bg-accordion-group heading="Tab4" content="Content4"></bg-accordion-group>
<bg-accordion-group heading="Tab5" content="Content5"></bg-accordion-group>
</bg-accordion>
</div>
</div>
<script id="jsbin-javascript">
var bgAccordian = angular.module('bgApp', []);
bgAccordian.controller('myCtrl', function ($scope) {
$scope.myName = 'bharath';
});
bgAccordian.directive('bgAccordion', ['$compile',
function ($compile) {
return {
restrict: 'E',
compile: function (ele, attr) {
if (attr.type.toUpperCase() === 'ACCORDION' || attr.type.toUpperCase() === 'COLLAPSE')
angular.element(ele).addClass('bg-panel-group');
else if (attr.type.toLowerCase() === 'menu-accordian')
angular.element(ele).addClass('bg-menu-group');
return function ($scope, ele, attrs) {
};
},
controller: function () {
console.log('bg-accordian controller');
}
};
}]);
bgAccordian.directive('bgAccordionGroup', function () {
var link = function ($scope, ele, attrs) {
$(ele).find('span').html($(ele).attr('heading'));
if ($(ele).attr('content'))
$(ele).find('.bg-panel-body').html($(ele).attr('content'));
if (typeof (ele.parent().attr('open-heading')) != "undefined") {
if ($(ele).find("span").text().toUpperCase() == $(ele).parent().attr("open-heading").toUpperCase()) {
$(ele).children().eq(1).show();
} else {
$(ele).children().eq(1).hide();
}
} else {
if (($(ele).index() + 1) == $(ele).parent().attr("open-bg-panel")) {
$(ele).children().eq(1).show();
} else {
$(ele).children().eq(1).hide();
}
}
$scope.openTab = function (e) {
if ($(ele).parent().attr('type').toLowerCase() === 'COLLAPSE') {
$(e.currentTarget).next().toggle();
}
else {
if (window.matchMedia('(min-width: 768px)').matches) {
$(e.currentTarget).parent().siblings().children().removeClass("bgActive");
$(e.currentTarget).addClass("bgActive");
console.log("tabs");
$(e.currentTarget).parent().siblings().find(".bg-panel-body").hide();
$(e.currentTarget).next().show();
} else {
console.log("accordion");
$(e.currentTarget).parent().siblings().children().removeClass("bgActive");
$(e.currentTarget).addClass("bgActive");
$(e.currentTarget).parent().siblings().find(".bg-panel-body").hide();
$(e.currentTarget).next().toggle();
}
}
};
};
return {
restrict: 'E',
replace: true,
template: function () {
return '<div class="bg-panel"><div class="bg-panel-title" ng-click="openTab($event)"><h3><a><span></span></a></h3></div><div class="bg-panel-body">' + $("bg-accordion-group").html() + '</div></div>';
},
compile: function (ele, attr) {
console.log('bg-accordian compiler');
return link;
}
};
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"><\/script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="container">
<div ng-app="bgApp" ng-controller="myCtrl">
<bg-accordion type="menu-accordian" open-heading="tab3" open-bg-panel="2">
<bg-accordion-group heading="Tab1" content="<a href='www.google.com'>Link1</a>"></bg-accordion-group>
<bg-accordion-group heading="Tab2" content="Content2"></bg-accordion-group>
<bg-accordion-group heading="Tab3" >
Content3
</bg-accordion-group>
<bg-accordion-group heading="Tab4" content="Content4"></bg-accordion-group>
<bg-accordion-group heading="Tab5" content="Content5"></bg-accordion-group>
</bg-accordion>
</div>
</div>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">/*Common CSS reset*/
html, body {
margin: 0;
padding: 0;
}
* {
margin: 0;
padding: 0
}
bg-accordion {
display: block;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.bg-panel-group {
width: 100%;
background-color: #f3f3f3;
color: #777;
position: relative;
}
.bg-panel-title {
background-color: #ccc;
margin: 0px;
}
.bg-panel-title a {
color: #fff;
padding: 6px 12px;
display: block;
font-size: 12pt;
}
.bg-panel-title {
background-color: #389abe;
background-image: -moz-linear-gradient(top, #389abe 0%, #2a7b99 100%); /* FF3.6+ */
background-image: -webkit-gradient(linear, left top, left bottombottom, color-stop(0%,#389abe), color-stop(100%,#2a7b99)); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, #389abe 0%,#2a7b99 100%); /* Chrome10+,Safari5.1+ */
background-image: -o-linear-gradient(top, #389abe 0%,#2a7b99 100%); /* Opera 11.10+ */
background-image: -ms-linear-gradient(top, #389abe 0%,#2a7b99 100%); /* IE10+ */
background-image: linear-gradient(to bottombottom, #389abe 0%,#2a7b99 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#389abe', endColorstr='#2a7b99',GradientType=0 ); /* IE6-9 */
}
.bg-panel-title a {
text-shadow: 1px 1px 0px rgba(0,0,0,0.2);
text-shadow: 1px 1px 0px rgba(0,0,0,0.2);
border-right: 1px solid rgba(0, 0, 0, .2);
border-left: 1px solid rgba(0, 0, 0, .2);
border-bottom: 1px solid rgba(0, 0, 0, .2);
border-top: 1px solid rgba(250, 250, 250, .2);
}
.bg-panel-group .bg-panel-title .bg-panel-body {
padding: 0;
background: none;
border: none;
outline: none;
}
@media only screen and (min-width: 768px) {
.bg-menu-group {
}
.bg-panel {
width: auto;
min-width: 15%;
display: inline-block;
float: left;
white-space: nowrap;
}
.bg-panel-body {
display: block;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
position: absolute;
border: 1px solid #389abe;
left: 0;
}
h3 {
margin: 0
}
.bg-panel-body {
padding: 0 5px;
margin-top: -1px;
}
}
.bgActive {
background-color: #fa9300;
background-image: -moz-linear-gradient(top, #fa9300 0%, #dc621e 100%); /* FF3.6+ */
background-image: -webkit-gradient(linear, left top, left bottombottom, color-stop(0%,#fa9300), color-stop(100%,#dc621e)); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, #fa9300 0%,#dc621e 100%); /* Chrome10+,Safari5.1+ */
background-image: -o-linear-gradient(top, #fa9300 0%,#dc621e 100%); /* Opera 11.10+ */
background-image: -ms-linear-gradient(top, #fa9300 0%,#dc621e 100%); /* IE10+ */
background-image: linear-gradient(to bottombottom, #fa9300 0%,#dc621e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fa9300', endColorstr='#dc621e',GradientType=0 ); /* IE6-9 */
}</script>
<script id="jsbin-source-javascript" type="text/javascript">var bgAccordian = angular.module('bgApp', []);
bgAccordian.controller('myCtrl', function ($scope) {
$scope.myName = 'bharath';
});
bgAccordian.directive('bgAccordion', ['$compile',
function ($compile) {
return {
restrict: 'E',
compile: function (ele, attr) {
if (attr.type.toUpperCase() === 'ACCORDION' || attr.type.toUpperCase() === 'COLLAPSE')
angular.element(ele).addClass('bg-panel-group');
else if (attr.type.toLowerCase() === 'menu-accordian')
angular.element(ele).addClass('bg-menu-group');
return function ($scope, ele, attrs) {
};
},
controller: function () {
console.log('bg-accordian controller');
}
};
}]);
bgAccordian.directive('bgAccordionGroup', function () {
var link = function ($scope, ele, attrs) {
$(ele).find('span').html($(ele).attr('heading'));
if ($(ele).attr('content'))
$(ele).find('.bg-panel-body').html($(ele).attr('content'));
if (typeof (ele.parent().attr('open-heading')) != "undefined") {
if ($(ele).find("span").text().toUpperCase() == $(ele).parent().attr("open-heading").toUpperCase()) {
$(ele).children().eq(1).show();
} else {
$(ele).children().eq(1).hide();
}
} else {
if (($(ele).index() + 1) == $(ele).parent().attr("open-bg-panel")) {
$(ele).children().eq(1).show();
} else {
$(ele).children().eq(1).hide();
}
}
$scope.openTab = function (e) {
if ($(ele).parent().attr('type').toLowerCase() === 'COLLAPSE') {
$(e.currentTarget).next().toggle();
}
else {
if (window.matchMedia('(min-width: 768px)').matches) {
$(e.currentTarget).parent().siblings().children().removeClass("bgActive");
$(e.currentTarget).addClass("bgActive");
console.log("tabs");
$(e.currentTarget).parent().siblings().find(".bg-panel-body").hide();
$(e.currentTarget).next().show();
} else {
console.log("accordion");
$(e.currentTarget).parent().siblings().children().removeClass("bgActive");
$(e.currentTarget).addClass("bgActive");
$(e.currentTarget).parent().siblings().find(".bg-panel-body").hide();
$(e.currentTarget).next().toggle();
}
}
};
};
return {
restrict: 'E',
replace: true,
template: function () {
return '<div class="bg-panel"><div class="bg-panel-title" ng-click="openTab($event)"><h3><a><span></span></a></h3></div><div class="bg-panel-body">' + $("bg-accordion-group").html() + '</div></div>';
},
compile: function (ele, attr) {
console.log('bg-accordian compiler');
return link;
}
};
});
</script></body>
</html>
/*Common CSS reset*/
html, body {
margin: 0;
padding: 0;
}
* {
margin: 0;
padding: 0
}
bg-accordion {
display: block;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.bg-panel-group {
width: 100%;
background-color: #f3f3f3;
color: #777;
position: relative;
}
.bg-panel-title {
background-color: #ccc;
margin: 0px;
}
.bg-panel-title a {
color: #fff;
padding: 6px 12px;
display: block;
font-size: 12pt;
}
.bg-panel-title {
background-color: #389abe;
background-image: -moz-linear-gradient(top, #389abe 0%, #2a7b99 100%); /* FF3.6+ */
background-image: -webkit-gradient(linear, left top, left bottombottom, color-stop(0%,#389abe), color-stop(100%,#2a7b99)); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, #389abe 0%,#2a7b99 100%); /* Chrome10+,Safari5.1+ */
background-image: -o-linear-gradient(top, #389abe 0%,#2a7b99 100%); /* Opera 11.10+ */
background-image: -ms-linear-gradient(top, #389abe 0%,#2a7b99 100%); /* IE10+ */
background-image: linear-gradient(to bottombottom, #389abe 0%,#2a7b99 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#389abe', endColorstr='#2a7b99',GradientType=0 ); /* IE6-9 */
}
.bg-panel-title a {
text-shadow: 1px 1px 0px rgba(0,0,0,0.2);
text-shadow: 1px 1px 0px rgba(0,0,0,0.2);
border-right: 1px solid rgba(0, 0, 0, .2);
border-left: 1px solid rgba(0, 0, 0, .2);
border-bottom: 1px solid rgba(0, 0, 0, .2);
border-top: 1px solid rgba(250, 250, 250, .2);
}
.bg-panel-group .bg-panel-title .bg-panel-body {
padding: 0;
background: none;
border: none;
outline: none;
}
@media only screen and (min-width: 768px) {
.bg-menu-group {
}
.bg-panel {
width: auto;
min-width: 15%;
display: inline-block;
float: left;
white-space: nowrap;
}
.bg-panel-body {
display: block;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
position: absolute;
border: 1px solid #389abe;
left: 0;
}
h3 {
margin: 0
}
.bg-panel-body {
padding: 0 5px;
margin-top: -1px;
}
}
.bgActive {
background-color: #fa9300;
background-image: -moz-linear-gradient(top, #fa9300 0%, #dc621e 100%); /* FF3.6+ */
background-image: -webkit-gradient(linear, left top, left bottombottom, color-stop(0%,#fa9300), color-stop(100%,#dc621e)); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, #fa9300 0%,#dc621e 100%); /* Chrome10+,Safari5.1+ */
background-image: -o-linear-gradient(top, #fa9300 0%,#dc621e 100%); /* Opera 11.10+ */
background-image: -ms-linear-gradient(top, #fa9300 0%,#dc621e 100%); /* IE10+ */
background-image: linear-gradient(to bottombottom, #fa9300 0%,#dc621e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fa9300', endColorstr='#dc621e',GradientType=0 ); /* IE6-9 */
}
var bgAccordian = angular.module('bgApp', []);
bgAccordian.controller('myCtrl', function ($scope) {
$scope.myName = 'bharath';
});
bgAccordian.directive('bgAccordion', ['$compile',
function ($compile) {
return {
restrict: 'E',
compile: function (ele, attr) {
if (attr.type.toUpperCase() === 'ACCORDION' || attr.type.toUpperCase() === 'COLLAPSE')
angular.element(ele).addClass('bg-panel-group');
else if (attr.type.toLowerCase() === 'menu-accordian')
angular.element(ele).addClass('bg-menu-group');
return function ($scope, ele, attrs) {
};
},
controller: function () {
console.log('bg-accordian controller');
}
};
}]);
bgAccordian.directive('bgAccordionGroup', function () {
var link = function ($scope, ele, attrs) {
$(ele).find('span').html($(ele).attr('heading'));
if ($(ele).attr('content'))
$(ele).find('.bg-panel-body').html($(ele).attr('content'));
if (typeof (ele.parent().attr('open-heading')) != "undefined") {
if ($(ele).find("span").text().toUpperCase() == $(ele).parent().attr("open-heading").toUpperCase()) {
$(ele).children().eq(1).show();
} else {
$(ele).children().eq(1).hide();
}
} else {
if (($(ele).index() + 1) == $(ele).parent().attr("open-bg-panel")) {
$(ele).children().eq(1).show();
} else {
$(ele).children().eq(1).hide();
}
}
$scope.openTab = function (e) {
if ($(ele).parent().attr('type').toLowerCase() === 'COLLAPSE') {
$(e.currentTarget).next().toggle();
}
else {
if (window.matchMedia('(min-width: 768px)').matches) {
$(e.currentTarget).parent().siblings().children().removeClass("bgActive");
$(e.currentTarget).addClass("bgActive");
console.log("tabs");
$(e.currentTarget).parent().siblings().find(".bg-panel-body").hide();
$(e.currentTarget).next().show();
} else {
console.log("accordion");
$(e.currentTarget).parent().siblings().children().removeClass("bgActive");
$(e.currentTarget).addClass("bgActive");
$(e.currentTarget).parent().siblings().find(".bg-panel-body").hide();
$(e.currentTarget).next().toggle();
}
}
};
};
return {
restrict: 'E',
replace: true,
template: function () {
return '<div class="bg-panel"><div class="bg-panel-title" ng-click="openTab($event)"><h3><a><span></span></a></h3></div><div class="bg-panel-body">' + $("bg-accordion-group").html() + '</div></div>';
},
compile: function (ele, attr) {
console.log('bg-accordian compiler');
return link;
}
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment