Difference between revisions of "Biomod/2013/Sendai/design"

From OpenWetWare
Jump to navigationJump to search
Line 140: Line 140:
  <article data-title="Chain-reactive burst">
Line 146: Line 148:
  <article data-title="Chain-reactive burst">
<h3 id="chain">Chain-reactive burst</h3></br>
<h3 id="chain">Chain-reactive burst</h3></br>

Revision as of 22:34, 26 September 2013

<html> <head> <style>

/********************** Hide MediaWiki and init CSS, overwrite by bootstrap.css バルス**********************/



} html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{

/* font-size:100%; */

} a, a:link, a:visited, a:hover, a:active{



/*訪れたリンクを白くするよ*/ .whiteSendai:visited{



/*左詰め、真ん中、右詰め*/ .leftSendai { text-align: left; } .centerSendai { text-align: center; } .rightSendai { text-align: right; }

.firstHeading {



  1. content{


  1. globalWrapper{


  1. contentSub{


  1. column-one{


  1. footer{


  1. globalWrapper{


  1. bodyContent h1, #bodyContent h2{
 margin-top: 20px;
 margin-bottom: 10px;


  1. bodyContent h3{
 margin-top: 20px;
 margin-bottom: 10px;
 border-bottom-width: medium;
 border-bottom-style: solid;
 border-bottom-color: gray;


  1. bodyContent h4{
 margin-top: 20px;
 margin-bottom: 10px;
 border-bottom-width: thin;
 border-bottom-style: solid;
 border-bottom-color: gray;


  1. bodyContent h5, #bodyContent h6{
 margin-top: 10px;
 margin-bottom: 10px;

/**** border-bottom-width: thin;

 border-bottom-style: solid;
 border-bottom-color: gray;
        • /


/********************************* Hide MediaWiki end *********************************/

/* Structure */ html{ background: #eee; } body {

 padding: 0px;
 background: #fff;
 color: #333;
 margin: 0 auto;
 max-width: 900px;
 font: 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;

a {

 color: #105672;


header {/****position: fixed; ****/

       /******width: 100%;****/
       height: 90px;
       z-index: 1;

background: #F17F25;

        padding:0.01em 0.5em 1.5em ;

color: #fff; line-height: 1;


header h1{ margin-bottom: 0; }

header h1 span{ display: inline; color: rgba(255,255,255,.4); }

header span{ display: block; color: rgba(255,255,255,.2); font-weight: 300; margin-bottom: 1.6em }

header nav{ float: right; text-align: right } header nav div{ font-size: .8em; } header nav div a { font-weight: 300; padding: .3em .5em } header nav a{ color: #fff; display: inline-block; padding: .3em .8em }

header nav a:hover, header nav a:focus{ color: rgba(255,255,255,.6) }

[role=main]{ padding:1.5em 3em; } article{ padding: 1em 0; text-align: justify; text-justify: inter-ideograph;


footer{ background: #333; color: #fff; padding: 1em 3em;

       clear: both;    /***2段組みの左右のfloatを解除***/


/* Typography */

p{ font: 1em/1.5 Palatino, "Palatino Linotype", Georgia, Times, "Times New Roman", serif; }


       font-size: 150%;
       font-weight: normal;
       font-family: Helvetica;
       background: #bbb;
       padding-left: 1.2em;


img{ max-width: 100%; /***** height: auto; *****/ }

blockquote{ float: left; margin: 1em 3em; } blockquote p{ font-size: 1.4em; line-height: 1.2; font-weight: 700; font-style:italic; } a{ font: 700 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; text-decoration: none } a:hover, a:focus{ color: #000; } a:active{ position: relative; top:1px; }

ol{margin: 1em 0 1em 0; padding-left: 2em; } li{ margin: 0; }

/* Tabs */

  1. tabs

{ /*****position:fixed;****/

      width: 900px; 


.js-on #tabs article { display:none }

  1. tabs, #tabs nav a.active{

background: #FFF; color: #111; }

  1. tabs nav

{ position: relative; overflow: hidden; display: table; background: #bbb; }

  1. tabs nav a

{ width:900px; display:table-cell; padding:1em; text-align:center; color: #333; }

  1. tabs nav a:hover,#tabs nav a:focus

{ background:#eee }

  1. tabs article

{ padding:2em; }

.js-on #tabs article.active { display:block; }

  1. tabs #mobiles{

display:none; border-radius: 0; }

  1. tabs #mobiles a, #tabs #mobiles a:first-child, #tabs #mobiles a:last-child{

width:300px; border-radius: 0; }

/* Media queries */ @media screen and (min-width:900px) { body{font-size: 1.1em;} }

@media screen and (max-width:600px) { #tabs nav{ display: none; position: relative; } #tabs #mobiles{ display:block; } #tabs article { display:block; } } @media screen and (max-width:480px) { blockquote{ float: none; }

header nav a{ padding:.7em .8em } header nav{ float: none; margin: -.5em -3em 0; background: #000; overflow: hidden; text-align: left } header nav a{ border-right: 1px solid #222 } [role=main]{ padding:1.5em 2em; } header nav div{ display: none; }


/*column content*/

  1. content-right {

width:48%; /***段落の横幅***/ float:right; /***右に寄せる(他の要素を左に回り込ませる)***/ margin: 10px; }

  1. content-left {

width:47%; /***サイドの横幅***/ float:left; /***左に寄せる***/ margin: 10px; }


div.caption-left{ float: left; padding: 0 5px 5px 5px; }

.caption-left span{ display: block; text-align: center;

       font-size: smaller;
       font-weight: bold;


div.clear{ clear: both; margin: 0 0 10px 0; }


div.caption-right{ float: right; padding: 0 5px 5px 5px; }

.caption-right span{ display: block; text-align: center;

       font-size: smaller;
       font-weight: bold;


div.clear{ clear: both; margin: 0 0 10px 0; }

/***floatの影響を絶つ。<div class="c-both"></div> のように使う***/

.c-both { clear: both; }


        font-style: normal;
        font-weight: bold;
        font-size: 70px;
        line-height: 70px;
        font-family: Helvetica;



       text-align: center;
       font-size: smaller;
       font-weight: bold;



       font-size: smaller;
       font-weight: bold;



  1. ttop {position:fixed;
      left:auto;margin:0 0 0 905px; /* マージン:上 右 下 左 */
      background:url(http://openwetware.org/images/f/f2/%E5%90%8D%E7%A7%B0%E6%9C%AA%E8%A8%AD%E5%AE%9A-1.png) no-repeat left bottom;}

/* IE6以下用、アスタリスクハックでググれ */

  • html #ttop {margin:0 0 -390px 0;
             position:relative;bottom:490px; /* 上で設定した ttopの高さ390px+下100px */
  1. ttop:hover {background:url(http://openwetware.org/images/b/b9/Top2.png) no-repeat left bottom;/* 画像の高さによって適当に調整 */

a.page_top {display:block;width:100px;height:390px;}

</style> </head> </html> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

   <title>Biomod2013 Sendai ver2.0</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <style type="text/css">
   h1{color: white;}


<body> <!-- <div style="max-width:900px; position:fixed;">****/ -->



               <a href="#"  class="whiteSendai">Blog</a> 
               <a href="#"  class="whiteSendai">Twitter</a>
               <a href="#"  class="whiteSendai">Facebook</a>

--> <br><br>

          <a href="http://openwetware.org/wiki/Biomod/2013/Sendai" class="whiteSendai">Top</a> 
           <a href="http://openwetware.org/wiki/Biomod/2013/Sendai/project" class="whiteSendai">Project</a>
           <a href="http://openwetware.org/wiki/Biomod/2013/Sendai/design" class="whiteSendai">Design</a> 
           <a href="http://openwetware.org/wiki/Biomod/2013/Sendai/calcuation" class="whiteSendai">Calculation</a>
           <a href="http://openwetware.org/wiki/Biomod/2013/Sendai/experiment" class="whiteSendai">Experiment</a>

<a href="http://openwetware.org/wiki/Biomod/2013" class="whiteSendai" style="float:right;"><img src="http://openwetware.org/images/6/6e/Biomod-logo.jpg"

                                              width="75" height="75" alt="Biomod2013" border="0"></a><br>
           <a href="http://openwetware.org/wiki/Biomod/2013/Sendai/protocol" class="whiteSendai">Protocol</a>   
           <a href="http://openwetware.org/wiki/Biomod/2013/Sendai/future" class="whiteSendai">Future</a> 
           <a href="http://openwetware.org/wiki/Biomod/2013/Sendai/member" class="whiteSendai">Member</a>
           <a href="http://openwetware.org/wiki/Biomod/2013/Sendai/sponsor" class="whiteSendai">Sponsor</a>
            <a href="http://openwetware.org/wiki/Biomod/2013/Sendai"><h1 style="color:white;" ><b>Biomod<span>2013<br>&emsp; Team</span>Sendai</b></h1></a> 

</header> <p class="sukima"> Design </p>

  <section id="tabs">


<article data-title="Egg-type initiator"> <h3 id="egg">Egg-type initiator</h3></br> <a name="#egg"></a>

<img src="http://openwetware.org/images/6/64/Design-top-01.png" alt="example-tab2" border="0"></br> <div align="center">

                   Fig.1 process of Egg-type initiator</div><br>


Egg-type initiator consists of two layers.<br>

<h4>The first layer: “alginate gel membrane”</h4> The alginate gel membrane has a solution phase inside them, and resembles artificial salmon caviars (JINKOH-IKURA in Japanese).<br><br>

<h4>The second layer: “temperature-sensitive liposomes”</h4> The temperature-sensitive liposomes contain PNIPAM lipids in their membrane. Temperature shift causing hydrophobicity change of the PNIPAM induces collapse of the liposomes (See

<a href="#Characters of the PNIPAM molecular">“Characters of the PNIPAM molecular”</a>

). The temperature-sensitive liposomes encapsulate a chelate compound (EGTA) and DNAs.<br><br>

The two layers realize a dual disruption system as follows (Fig.1). The first is “liposome disruption” by increasing temperature. The second is “disruption of alginate membrane” by chelating reagent (EGTA) of calcium released from the liposomes disrupted. This system enables to release many trigger DNAs at a limited point.<br><br>

1.The alginate gel membrane encapsulates many temperature-sensitive liposomes.<br> Please refer following link( <a href="http://www.sigmaaldrich.com/etc/medialib/docs/SAJ/Brochure/1/j_recipedds2.Par.0001.File.tmp/j_recipedds2.pdf">pdf</a> ).<br> 2. Warming the temperature-sensitive liposomes from room temperature to over 32 ºC causes disruption of the liposomes.<br> 3. The liposome disruption release DNAs and EGTA (and urea) which chelate calcium. Lowering calcium concentration starts to melt the alginate gel membrane. During this process, DNA origami is formed when urea is added.<br>

4. As a result of the melting, trigger DNAs (DNA origami structure or DNA strands for the flower micelle approach (See design: Chain-reactive burst <!-- <a href="#chain-reactive burst"> Chain-reactive burst</a> -->


)) are released from the melted alginate membrane.<br>

<h4>An application to DNA origami formation using the dual disruption system</h4> This dual structure enables to spontaneous formation of DNA origami through environmental stimulation. Three components, Urea (a denature reagent of DNA nanostructure) and materials of DNA origami and EGTA, can be encapsulated in liposomes. It takes times (several hours) to melt the gel membrane by EGTA released from the temperature-sensitive liposomes. Because small molecules can diffuse in alginate gels, urea inside alginate is expected to be gradually diluted during the melting. DNA origami could be formed through the dilution of urea (See

<a href="#DNA origami formation through urea dilution">“DNA origami formation through urea dilution”</a>


<h5>※Principle of this system</h5> <h5>Alginate gels</h5> Alginate is widely used in foods additives and drug stabilizers. <br>Sodium alginate is the neutral salt which an alginate carboxyl group coupled with a Na+. It dissolves in water well and becomes water solution with the high viscosity. If Ca2+ is added to the sodium alginate solution, ion bridging happens instantly and gelation happen. And If Chelating reagent (for example EDTA, EGTA) is added to alginate hydrogel, Ca2+ is robbed and gel collapse. <br>

<img src="http://openwetware.org/images/d/d2/Alginate-gel_2.png"><br> Fig.2 A image about Gelation and Solation of alginate gel<br><br>

<a name="Characters of the PNIPAM molecular"></a> <h5>Characters of the PNIPAM molecular</h5>

Hydrophobicity of NIPAM varies at temperatures. NIPAM is hydrophilic at less than 32 ºC, but it become hydrophobic and shrinks at > 32 ºC. Therefore, liposomes containing a modified NIPAM (poly(NIPAM-co-AA-co-ODA) in their membranes become unstable at high temperature (temperature-sensitive liposomes). Consequently, increasing temperature disrupt the liposomes.<br> Reference( <a href= "http://www.sigmaaldrich.com/etc/medialib/docs/SAJ/Brochure/1/j_recipedds2.Par.0001.File.tmp/j_recipedds2.pdf">pdf</a>) <br>

<div align="center"><img src="http://openwetware.org/images/d/df/PNIPAM-function-02.png" width="600"></div><br> Fig.3 A schematic image how liposome containing PNIPAM disrupt at high temperature is shown.<br><br>

<a name="DNA origami formation through urea dilution"></a>

<h5>DNA origami formation through urea dilution</h5>

Polarity of water molecular becomes weak in the presence of urea. Thus, urea interrupts the hydrogen bond of DNA bases. For the reason, the melting point of DNA hybridization decreases. Thus, gradually decreasing the concentration of urea enables to form DNA origami structure under isothermal condition.<br>

<img src="http://openwetware.org/images/4/4b/Nyoso.png"><br> Fig.4 A image about denaturation by urea


 <article data-title="Chain-reactive burst">


<h3 id="chain">Chain-reactive burst</h3></br> <br> We designed “chain-reactive burst” system as follows.<br> Each liposome contains triggers and drugs inside, and aptamers for the trigger on its surface. When liposomes are destroyed, new triggers and drugs are released. To achieve liposomal burst by outside triggers, we propose the following two approaches. <br> <br> <li> <h5>i) Bending approach</h5></li> <li> <h5>ii) Flower micelle approach</h5></li> <br> First, we considered a theory to disrupt liposomes by a trigger DNA signal through calculation. If a liposome is destroyed, its size becomes smaller. We estimated the free energy gap between the two liposomal states: a large liposome and a small one. And discuss which size of liposomes is more stable.<br> Please see the details (Go to <a href="http://openwetware.org/wiki/Biomod/2013/Sendai/calcuation">Calculation</a>).<br>

<h4> i)Bending Approach</h4><br>

<Img Src="http://openwetware.org/images/f/f2/Design-bending-flow.png" Align="center" width="900px" ><br> <div align="center">Fig.1 Process of bending approach</div><br> <br> Our bending approach consists of the following four steps.<br> 1.Cholesterol-conjugated DNA strands (in the rest of this document, referred to as “aptamers”) attach to the surfaces of liposomes.<br> 2. Then, DNA origami complementary to the aptamer is added as triggers.<br> 3. Triggers bind to the surfaces of liposomes and give a load on the membrane.<br> 4. Due to the load by triggers, liposomes are destroyed.<br> <br>

<h5>a) Mechanism of bending membranes</h5> To destroy liposomes, we focused on the mechanism the living things use to bend cell membranes. We consider that if we could make use of the mechanism of bending membranes (destabilizing membranes), it would lead to the collapse of membranes. The following three mechanisms have been proposed as of now (<A Href="http://www.ncbi.nlm.nih.gov/pubmed/19780639">Membrane-bending proteins</A>)<br>

<div class="caption-left">

<Img Src="http://openwetware.org/images/a/ae/Designfig2.png" width="280px" height="400px">

<span>Fig.2 Mechanism of bending membranes</span></div> <br> The mechanism A is that amphipathic molecules are inserted into the cell membrane and the bending is caused. The inner hydrophobic part of the lipid bilayer has a strong adhesive power for the two leaflets. Thus, once the amphipathic molecules are inserted into one leaflet of the membrane and expand it, the other leaflet bends according to it, making its surface area smallest.<br> <br> The mechanism B is that the molecule attached to the membrane becomes a rigid scaffold and distort the membrane under itself, or stabilize the already bended membrane.<br> <br> The mechanism C is that lipid molecules are clustered in one leaflet of the membrane and the inequality of lipid quantity makes the membrane bend.<br> <div class="c-both"></div>

Most membrane bending proteins combine the above three mechanisms.<br> In addition, a theory that protein crowding causes the bending of cell membranes ( <A Href="http://www.ncbi.nlm.nih.gov/pubmed/22902598">Membrane bending by protein- protein crowding</A>) has recently been suggested. This mechanism is that the collision of membrane proteins produces lateral pressure on membranes and distorts them.<br> <br> Due to the above reasons, the efficient design for destabilizing membranes is the structures that :<br> <ur><li>have rigid scaffolds</li> <li>have large surface areas to maximize the effect of the scaffold on the membrane</li> <li>produce a large pressure by collisions</li></ur> <br> <h5>b) Rigid scaffolds</h5> To make rigid scaffolds, we took note of DNA origami, because DNA origami is a method for making rigid structures of any shape. Moreover, we adopted a 2D structure to make the surface area largest.<br>

<br> We also designed rectangle and triangle to make the pressure of the collision highest.<br> <Img Src="http://openwetware.org/images/e/e7/Design-outside-fig3.png"> <br> <div align="center">Fig.3 Rectangle origami and triangle origami</div><br> We suppose that rectangle and triangle structures are most effective for the following reasons. <br> Rectangle is expected to work as one scaffold in itself; triangle (the most efficient figure that covers a sphere) structures, to gather and work as one big rigid scaffold.<br> <br> The design of our rectangular DNA origami is as below.<br> <Img Src="http://openwetware.org/images/b/b1/Design-outside-fig4.png"> <div align="center">Fig.4 Rectangular origami</div> <br> <div class="caption-right">

<Img Src="http://openwetware.org/images/a/a7/Lipo5.png" ><span>Fig.5 DNA origami designed by caDNAno</span>

</div> We used <A Href="http://cadnano.org/">caDNAno2</A> for our DNA origami design.<br> The DNA origami has a rectangle shape of 67.6nm (26 helixes) by 127 nm (374 bases).<br> We cut out a smaller rectangle of 10 helixes by 161 bases at one edge of this origami, so that we could distinguish the two sides during AFM (Atomic Force Microscope) observation.<br> Besides, to destabilize the membrane by inserting this origami, we designed 141 staples at the center of the origami to hybridize with aptamers (These aptamers give our origami amphipathicity), and enabled it to insert into the membrane. <br> <div class="c-both"></div> To sum up, the aptamer not only connects DNA origami and liposomes but also inserts into the membrane and destabilizes it.<br>

<Img Src="http://openwetware.org/images/c/c5/Outsidefig5.png"> <div align="center">Fig.6 Unstable liposome</div> <br> <h4>ii)Flower micelle approach</h4><br> <Img Src="http://openwetware.org/images/8/8f/Design-flower-flow.png" Align="center" width="900px" ><br> <div align="center">Fig.7 Process of flower micelle approach</div><br>

<div class="caption-right"> <Img Src="http://openwetware.org/images/6/6f/Design-flowermicelle.png" style="width:425px;"><span>Fig.8 Flower micelle method</span></div> There is a method called flower micelles for collapsing liposomes. <br> In this method, we cover the surfaces of liposomes with many copolymer rings. The rings can be distorted by heating, place some stress on the liposomes, and collapse them.<br> We tried to collapse liposomes by applying this mechanism of flower micelles.<br> <div class="c-both"></div> <br> 1. First, we mix aptamers (the same strands as used in i) Bending approach), loop strands, and liposomes.<br> Each of the loop strands is designed to have two complementary parts to aptamers at its both ends. So when it binds to the aptamers at the both ends, the middle part remains single-stranded and becomes a loop. <br> As an aptamer is cholesterol-conjugated and has high affinity for a liposome, it floats on a liposome and enables the aptamer-loop strand complex attach to the liposome. In other words, a loop strand hybridizes with a liposome via two aptamers.<br> <Img Src="http://openwetware.org/images/a/aa/Flower2.png"> <br> <div align="center">Fig.9 Make loops on the surface of a liposome</div> <br> 2. Next, we add a trigger strand corresponding (complementary) to the loop strand on the liposome. The trigger strand hybridizes with the loop part, making it change to be straight.<br> <br> 3. The double-stranded part keeps straight (though it was originally a loop part), because the trigger strand is designed to be shorter than its persistence length.<br> <img src="http://openwetware.org/images/0/03/Flower3.png"><br> <div align="center">Fig.10 How to straighten loop</div> 4.In this process, some stress is placed on the liposome, and it is collapsed.<br> <Img Src="http://openwetware.org/images/3/3b/Flower4.png"><br> <div align="center">Fig.11 Liposomal burst</div> <br> It is considered if some triggers are kept inside a liposome, and the liposomal membrane is collapsed by the above i) and ii) methods from the outside, it would be much easy to trigger "Chain-reactive burst", because the released triggers serve as new triggers for neighbor liposomes. <br> <br> We designed the DNA sequences for this approach by <A Href="http://www.dna.caltech.edu/DNAdesign/">DNA design</A>, software for designing DNA sequences. <br> We arranged three kinds of loop strands. <br> Each loop strand has a 40nt, 20nt, or 10nt loop part (shown below in black and blue), which becomes a loop after the hybridization of the whole loop strand with aptamers.<br> The blue part of a loop strand is complementary to a corresponding trigger strand (also shown in blue). So a loop strand and a trigger strand are expected to hybridize with each other, place some stress on a liposome, and collapse it. <br> The red part of a loop strand is complementary to an aptamer (shown in red). Cooperating with aptamers, it enables the whole loop strand to attach to the surface of a liposome. <br> Aptamers are the same strands as those used in i)Bending approach.<br> <font size="-2"> Aptamer DNA<br> <font color="red">CCAGAAGACG</font> -cholesterol<br> 40nt loop DNA<br> <font color="red">CGTCTTCTGG</font>TTTTTTTTTT<font color="blue">GCGAACCACGGTTCCCAGCGTGACCTTCATGCTTAAGTTT</font><font color="red">CGTCTTCTGG</font><br> Trigger DNA for 40 nt loop DNA<br> <font color="blue">AAACTTAAGCATGAAGGTCACGCTGGGAACCGTGGTTCGC</font><br> 20nt loop DNA<br> <font color="red">CGTCTTCTGG</font>TTTTTTTTTTTT<font color="blue">CATAACATGAGGCGCCGT</font><font color="red">CGTCTTCTGG</font><br> Trigger DNA for 20 nt loop DNA<br> <font color="blue">ACGGCGCCTCATGTTATGAA</font><br> 10nt loop DNA<br> <font color="red">CGTCTTCTGG</font>TTTTTTTTTT<font color="blue">CTGTAACTAA</font><font color="red">CGTCTTCTGG</font><br> Trigger DNA for 10 nt loop DNA<br> <font color="blue">TTAGTTACAG</font><br> </font>



<!-- /***** </div> ****/ -->

       <p>&copy; Copyright Biomod 2013 Team Sendai
               <a href="http://www.molbot.mech.tohoku.ac.jp/index.html">

                  <img src="http://openwetware.org/images/3/36/Murata-nomura-logo.png"

                                     width="180" height="50" alt="Molcular Robotics Lab" border="0" align="right">

         </a>      </p>

           <a href="mailto:biomod.teamsendai.2012@gmail.com">biomod.teamsendai.2012@gmail.com
       <a href="?action=edit" align="center"><p>edit</p></a>

</body> </html>

<html> <head>

       <script type="text/javascript">
     function tabs(a,g,j){document.body.className="js-on";var g=a.getElementsByTagName(g),d=[],c;this.active;this.total=g.length;this.container=a;e=a.insertBefore(document.createElement("nav"),g[0]),change=function(f){if(typeof this.active!=="undefined"){d[this.active].className=g[this.active].className=""}d[f].className=g[f].className="active";this.active=f},clickEvent=function(h,f){h.onclick=function(){change(f);return false}};for(var b=0;b<g.length;b++){d[b]=e.appendChild(document.createElement("a"));d[b].href="#";c=[g[b].getAttribute("data-title"),g[b].getElementsByTagName(j)[0]];d[b].innerHTML=c[0]!==null?c[0]:c[1]?c[1]["innerText"||"textContent"]:b+1;new clickEvent(d[b],b)}change(0)}tabs.prototype.change=function(b){change(b-1)};tabs.prototype.next=function(b){active===this.total-1?change(0):change(active+1)};tabs.prototype.prev=function(b){active===0?change(this.total-1):change(active-1)};tabs.prototype.responsive=function(d,c){nav=document.createElement("nav");nav.id="mobiles";nav.innerHTML='<a href="#" onclick="'+d+'.prev(); return false">'+c.prev+'</a><a href="#" onclick="'+d+'.next(); return false">'+c.next+"</a>";this.container.insertBefore(nav,this.container.firstChild);return this};
       <script type="text/javascript">

var myTabs = new tabs(document.getElementById("tabs"), "article", "h2").responsive("myTabs", { prev: "Previous", next: "Next" }); </script> </head> </html>