Skip to content

Commit

Permalink
docs(accordion);make accordion work on setup page
Browse files Browse the repository at this point in the history
  • Loading branch information
@bfrisch1
bfrisch1 committed Feb 26, 2017
1 parent 6effbe1 commit 0df3a49
Show file tree
Hide file tree
Showing 3 changed files with 66 additions and 51 deletions.
50 changes: 27 additions & 23 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,38 +99,42 @@ <h2 class="section-why">Why We Created letsGo</h2>
<div id="setup" class="main-section letsGo-hide">
<h2>Setup</h2>
<h4>Installation Options:</h4>
<button class="accordion"><h5>npm<h5></button>
<div class="panel">

<button onclick="letsGo('#npm','toggle', true)" class="accordion"><h5>npm<h5></button>
<div id ="npm" class="panel letsGo-hide">
<div class="fake-code">
npm install letsgo
</div>
</div>
<button class="accordion"><h5>Bower<h5></button>
<div class="panel">

<button onclick="letsGo('#bower','toggle', true)" class="accordion"><h5>Bower<h5></button>
<div id="bower" class="panel letsGo-hide">
<div class="fake-code">
bower install letsgo
</div>
</div>
<button class="accordion"><h5>manual download<h5></button>
<div class="panel">
<p class="bottom-margin">Download a letsGo .zip via <a href="https://github.com/Beg-in/letsGo/releases/latest" title="letsGo Latest Release" target="_blank">GitHub</a>, then place the unzipped folder inside of your project's folder.</p>
</div>
<button class="accordion"><h5>CDN<h5></button>
<div class="panel">
<p>You will need to pick out the version of letsGo you would like to use, most likely the latest. A list of all releases is available on <a href="https://github.com/Beg-in/letsGo/releases" title="letsGo Releases" target="_blank">GitHub</a>.</p>
<div class="fake-code" style="margin-bottom: 0px;">
&lt;!DOCTYPE html&gt;<br>
&lt;html&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;head&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;letsGo Project&lt;/title&gt;<br>
<!-- TODO: Switch to minified -->
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script type="text/javascript" src="https://cdn.rawgit.com/Beg-in/letsGo/[X.Y.Z]/letsgo.js" async&gt;&lt;/script&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...<br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/head&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;...<br>
&lt;/html&gt;<br>

<button onclick="letsGo('#manual','toggle', true)" class="accordion"><h5>manual download<h5></button>
<div id ="manual" class="panel letsGo-hide">
<p class="bottom-margin">Download a letsGo .zip via <a href="https://github.com/Beg-in/letsGo/releases/latest" title="letsGo Latest Release" target="_blank">GitHub</a>, then place the unzipped folder inside of your project's folder.</p>
</div>

<button onclick="letsGo('#cdn','toggle', true)" class="accordion" class="accordion"><h5>CDN<h5></button>
<div id ="cdn" class="panel letsGo-hide">
<p>You will need to pick out the version of letsGo you would like to use, most likely the latest. A list of all releases is available on <a href="https://github.com/Beg-in/letsGo/releases" title="letsGo Releases" target="_blank">GitHub</a>.</p>
<div class="fake-code" style="margin-bottom: 0px;">
&lt;!DOCTYPE html&gt;<br>
&lt;html&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;head&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;letsGo Project&lt;/title&gt;<br>
<!-- TODO: Switch to minified -->
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script type="text/javascript" src="https://cdn.rawgit.com/Beg-in/letsGo/[X.Y.Z]/letsgo.js" async&gt;&lt;/script&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...<br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/head&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;...<br>
&lt;/html&gt;<br>
</div>
</div>
</div>
<h5>
One last thing...
</h5>
Expand Down
24 changes: 0 additions & 24 deletions docs/letsgo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -304,28 +304,4 @@ var letsGo = function(target, command, attribute, queue) {
router(target, command, attribute);
}


var accordion = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < accordion.length; i++) {
accordion[i].onclick = function(){
/* Highlight the button that controls the panel */
this.classList.toggle("active");

/* Toggle between hiding and showing the active panel */
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}

};
43 changes: 39 additions & 4 deletions docs/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,16 +91,51 @@ button.accordion {
transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
background-color: #bef4c7;
button.accordion-, button.accordion:hover {
background-color: #3a8fcc;
}

div.panel {
padding: 0 10px;
background-color: #bef4c7;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;

}

#npm.letsGo-hide-remove, #bower.letsGo-hide-remove, #manual.letsGo-hide-remove {
transition: max-height 1s;
max-height: 0;
}

#npm.letsGo-hide-remove-active, #bower.letsGo-hide-remove-active, #manual.letsGo-hide-remove-active {
max-height:80px;
}

#npm.letsGo-hide-add, #bower.letsGo-hide-add, #manual.letsGo-hide-add {
transition: max-height 1s;
max-height: 80px;
}

#npm.letsGo-hide-add-active, #bower.letsGo-hide-add-active, #manual.letsGo-hide-add-active {
max-height:0px;
}

#cdn.letsGo-hide-remove{
transition: max-height 1s;
max-height: 0;
}

#cdn.letsGo-hide-remove-active {
max-height:300px;
}

#cdn.letsGo-hide-add {
transition: max-height 1s;
max-height: 300px;
}

#cdn.letsGo-hide-add-active {
max-height:0px;
}

.tab-child-clicked {
Expand Down

0 comments on commit 0df3a49

Please sign in to comment.