Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="test" class="dom">
  </div>
​
  
  <div id="test1" class="dom">
  </div>
​
  
   <div id="test2" class="dom">
  </div>
​
<div id="TEST">
  </div>
</body>
</html>
 
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Open Sans', sans-serif;
  color: #fff;
}
.container{
  width:90%;
  margin:auto;
}
.tab {
  margin-left:5px;
  position: relative;
  margin-bottom: 1px;
  width: 100%;
  color: #fff;
  overflow: hidden;
}
input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
label {
  position: relative;
  display: block;  
  padding: 0 0 0 1.5em;
  background: #d9e9f4;
  font-weight: 500;
  font-size:15px;
  line-height: 3;
  cursor: pointer;
  color:#439ad2;
}
.tab-content {
  max-height: 0;
  overflow: hidden;
  background: white;
  -webkit-transition: max-height .35s;
  -o-transition: max-height .35s;
  transition: max-height .35s;
}
.tab-content p {
  margin: 1em;
}
/* :checked */
input:checked ~ .tab-content {
  max-height: 10em;
}
/* Icon */
label::before {
  position: absolute;
  left: -.5em;
  top: 0;
  display: block;
  width: 3em;
  height: 3em;
  line-height: 3;
  text-align: center;
  -webkit-transition: all .35s;
  -o-transition: all .35s;
  transition: all .35s;
}
input[type=checkbox] + label::before {
  content: "▸";
}
input[type=radio] + label::before {
  content: "\25BC";
}
input[type=checkbox]:checked + label::before {
  transform: rotate(90deg);
}
input[type=radio]:checked + label::before {
  transform: rotateX(90deg);
}
​
​
​
.hotel-list{
  list-style-type:none;
  padding:0;
  margin:0;
}
.hotel-list > li{
  color:#76b0dc;
  font-weight:400;
  font-size:12px;
  margin:0;
  display:inline-block;
  width:100%;
  border-bottom:solid 1px #76b0dc;
  padding:5px 5px 5px 15px;
}
.hotel-list > li>.left{
  float:left;
}
.hotel-list > li>.right{
  float:right;
}
.star:before{
  content:' ';
}
.star{
 color:red;
  font-size:10px;
  display:inline-block;
  padding-left:2px;
}
.price{
  color:#118c18;
}
​
.dom{
  margin-bottom: 25px
}
​
​
 
(function(){
    //constructor
    this.Tabs = function(){
​
        //from param
        var data = [];
        if(arguments[0] && arguments[0].constructor === Object){
            this.params = arguments[0];
            data = this.params.data;
            this.domId = this.params.domId;
        }   
​
        this.$tabs = null;
        this.$list = [];
        this.data = data;
        console.log(this.data)
        this.suffix = Math.floor((Math.random() * 1000) + 1);
          init.call(this);
      /*
            [{
                label: "newyork",
                items: [{
                    link: "newyork edge",
                    rating: 3
​
                },{
                    link: "newyork edge",
                    rating: 3
                }]
            }, {}]
        */
    }
    //public
    Tabs.prototype.addTab = function(item){
        
    }
​
    Tabs.prototype.removeTab = function(index){
​
    }
​
    Tabs.prototype.setTabs = function(items){
​
    }
​
    //private 
​
    function init(){
        console.log(this.data)
        this.$tabs = document.createElement("div");
        this.$tabs.className = "container";
        setTabs.call(this);
    }
​
    function setTabs(){
        console.log(this.data);
        var _that = this, $temp = null, $html = "";
        this.$list = [];
        for(var i=0, len=this.data.length; i<len; i ++){
            $temp = null;
            $temp = _getItemTemplate();
            $temp = $temp.replace(new RegExp('{{ID}}', 'g'), _that.suffix + "-" + i);
            $temp = $temp.replace(new RegExp('{{TITLE}}', 'g'), this.data[i].title);
            $temp = $temp.replace(new RegExp('{{CONTENT}}', 'g'), this.data[i].content);
            this.$list.push($temp);
        }
​
        $html = this.$list.join("");
        this.$tabs.innerHTML = $html;
        //document.getElementById(this.domId).innerHTML = $html
        document.getElementById(this.domId).append(this.$tabs)
​
    }
​
    function _getItemTemplate(){
        var template = '<div class="tab">'
            + '<input id="{{ID}}" type="checkbox" name="tabs">'
            + '<label for="{{ID}}">{{TITLE}}</label>'
            + '<div class="tab-content">'
            + '{{CONTENT}}'
            + '</div>'
            + '</div>';
​
        return template;
    }
​
})()
​
var hotelList = `<ul class="hotel-list">
            <li> 
                <span class='left'>The May Fair</span>
                <span class='right'>From <strike>£232</strike> <span class='price'>£192<span> 4<span class='star'>&#9733;<span> </span>
            </li><li > 
                <span class='left'>Grand Plaza Serviced Apartments</span>
                <span class='right'>From <span class='price'>£78</span> 3<span class='star'>&#9733;<span> </span>
            </li><li > 
                <span class='left'>Lancaster Gate Hotel</span>
                <span class='right'>From <strike>£68</strike> <span class='price'>£64</span> 5<span class='star'>&#9733;<span> </span>
            </li><li > 
                <span class='left'>Radisson Edwardian Grafton Hotel</span>
                <span class='right'>From <span class='price'>£102</span> 2<span class='star'>&#9733;<span> </span>
            </li><li > 
                <span class='left'>The Rembrandt</span>
                <span class='right'>From <strike> £150</strike> <span class='price'>£122</span> 3<span class='star'>&#9733;<span> </span>
            </li>
        </ul>`;
var tabs = new Tabs({
domId : "test",
data: [{title: "hotels in newyork", content:hotelList },{title: "hotels in UK", content:hotelList },{title: "hotels iangalore", content:hotelList }]
});
​
​
var tabs1 = new Tabs({
domId : "test1",
data: [{title: "hotels in newyork", content:hotelList },{title: "hotels in UK", content:hotelList },{title: "hotels iangalore", content:hotelList }]
});
​
var tabs = new Tabs({
domId : "test2",
data: [{title: "hotels in newyork", content:hotelList },{title: "hotels in UK", content:hotelList },{title: "hotels iangalore", content:hotelList }]
});
​
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers