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
Post a Comment