javascript - Replicating jQuery slideToggle without jQuery -


since anki doesn't support jquery, how go converting jquery on particular document same effects produced in vanilla js, or purely in css3 (specifically of + button, , when clicking on list items)?

$(document).ready(function () {      $("#show-pronunciation").on("click", function () {          $(".pronunciation").slidetoggle();      });      $("li").on("click", function () {          $(this).find("dl").slidetoggle();      });  });
body {      font-family: avenir, futura, sans-serif;      background-color: #f7f7f7;  }    .definitions dl {      border-left: 2px solid #ff1919;      padding-left: 5px;      }    dt {      font-weight: bold;  }    dd {      margin-left: 1em;  }    .main {      margin: 20px 20px 0 20px;      border: transparent;      border-radius: 5px;      /*padding: 15px 10px 5px 10px;*/      border-collapse: collapse;      background-color: #ff4c4c;      padding-bottom: 5px;  }    .header {      border-radius: 5px;      padding: 5px;      background-color: white;  }    .content {      margin: 5px 5px 0px 5px;      border: transparent;      border-top: none;      border-radius: 5px;      padding: 5px;      background-color: #fce8e8;  }    .info {      clear: both;      padding: 5px;      display: block;  }    .grammatical-info {      display: inline-block;      border: transparent;      border-radius: 5px;      float: left;      padding: 3px;      background: deepskyblue;      color: white;  }    .level {      display: inline-block;      border: transparent;      border-radius: 5px;      float: right;      padding: 3px;      background: crimson;      color: white;  }    .foreign-word {      display: inline-block;      border: transparent;      position: relative;      font-size: 20pt;  }    .pronunciation {      display: none;      overflow: auto;      border: transparent;      border-radius: 10px;      background-color: white;      font-size: 8pt;      position: absolute;      left: -2px;      bottom: 40px;      width: 100%;      text-align: center;  }    .btn {      font-size: 20pt;      background-color: transparent;      border: none;      border-radius: 28px;      cursor: pointer;      text-decoration: none;      text-shadow: none;      display: inline-block;      color: #999;  }    .btn:hover {      color: #aaa;  }    .btn:active {      color: #ccc;  }    #play-sound {      float: right;  }
<!doctype html>  <html>  <head>  	<title>2ndlang card type</title>  	<link rel="stylesheet" type="text/css" href="style.css"/>  	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>  	<script type="text/javascript" src="script.js"></script>  </head>  <body>  	<div class="main">  		<div class="header">  			<button class="btn" id="show-pronunciation">+</button>  			<div class="foreign-word">  			    制造  			    <div class="pronunciation">  			        zhì zào  			    </div>  			</div>  			<button class="btn" id="play-sound"><img src="http://uxrepo.com/static/icon-sets/elusive/svg/volume.svg" height="20px"/></button>  		</div>  		<div class="info">  		    <span class="grammatical-info">动 verb</span>  		    <span class="level">三</span>  		</div>  		<br/>  		<div class="content">  			  			<div class="definitions">  				<ol>  					<li>  					    manufacture  					    <dl>  					        <dt>中国制造</dt>  					        <dd>made in china</dd>  					    </dl>  					</li>  					<li>  					    create  					    <dl>  					        <dt>制造假象</dt>  					        <dd>put false front</dd>  					        <dt>制造紧张局势</dt>  					        <dd>create tension</dd>  					        <dt>制造麻烦</dt>  					        <dd>make trouble</dd>  					    </dl>  					</li>  				</ol>  			</div>  		</div>  	</div>  </body>  </html>

you can use css transitions that. e.g:

.pronunciation, li dl {   overflow: hidden;   transition: height .3s linear; } .hidden {   height: 0!important; } 

take @ code below (same logic yours, converted vanilla javascript , css3):

document.addeventlistener('domcontentloaded', function() {    var show = document.getelementbyid('show-pronunciation');    var pron = document.queryselector('.pronunciation');        pron.style.height = pron.clientheight + 'px';    pron.classlist.add('hidden');      show.addeventlistener('click', function(e) {      pron.classlist.toggle('hidden');    });        [].foreach.call(document.queryselectorall('li'), function(el, i) {      var dl = el.queryselector('dl');      dl.style.height = dl.clientheight + 'px';            el.addeventlistener('click', function() {        dl.classlist.toggle('hidden');      });    });    });
body {    font-family: avenir, futura, sans-serif;    background-color: #f7f7f7;  }  .definitions dl {    border-left: 2px solid #ff1919;    padding-left: 5px;  }  dt {    font-weight: bold;  }  dd {    margin-left: 1em;  }  .main {    margin: 20px 20px 0 20px;    border: transparent;    border-radius: 5px;    /*padding: 15px 10px 5px 10px;*/    border-collapse: collapse;    background-color: #ff4c4c;    padding-bottom: 5px;  }  .header {    border-radius: 5px;    padding: 5px;    background-color: white;  }  .content {    margin: 5px 5px 0px 5px;    border: transparent;    border-top: none;    border-radius: 5px;    padding: 5px;    background-color: #fce8e8;  }  .info {    clear: both;    padding: 5px;    display: block;  }  .grammatical-info {    display: inline-block;    border: transparent;    border-radius: 5px;    float: left;    padding: 3px;    background: deepskyblue;    color: white;  }  .level {    display: inline-block;    border: transparent;    border-radius: 5px;    float: right;    padding: 3px;    background: crimson;    color: white;  }  .foreign-word {    display: inline-block;    border: transparent;    position: relative;    font-size: 20pt;  }  .pronunciation {    overflow: auto;    border: transparent;    border-radius: 10px;    background-color: white;    font-size: 8pt;    position: absolute;    left: -2px;    bottom: 40px;    width: 100%;    text-align: center;  }  .btn {    font-size: 20pt;    background-color: transparent;    border: none;    border-radius: 28px;    cursor: pointer;    text-decoration: none;    text-shadow: none;    display: inline-block;    color: #999;  }  .btn:hover {    color: #aaa;  }  .btn:active {    color: #ccc;  }  #play-sound {    float: right;  }    .pronunciation, li dl {    overflow: hidden;    transition: height .3s linear;  }  .hidden {    height: 0!important;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <div class="main">    <div class="header">      <button class="btn" id="show-pronunciation">+</button>      <div class="foreign-word">        制造        <div class="pronunciation">          zhì zào        </div>      </div>      <button class="btn" id="play-sound">        <img src="http://uxrepo.com/static/icon-sets/elusive/svg/volume.svg" height="20px" />      </button>    </div>    <div class="info">      <span class="grammatical-info">动 verb</span>      <span class="level">三</span>    </div>    <br/>    <div class="content">        <div class="definitions">        <ol>          <li>            manufacture            <dl>              <dt>中国制造</dt>              <dd>made in china</dd>            </dl>          </li>          <li>            create            <dl>              <dt>制造假象</dt>              <dd>put false front</dd>              <dt>制造紧张局势</dt>              <dd>create tension</dd>              <dt>制造麻烦</dt>              <dd>make trouble</dd>            </dl>          </li>        </ol>      </div>    </div>  </div>


Comments

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -