Post by Alan Vende on Oct 24, 2017 23:10:39 GMT -8
Forum URL: louisvendetti.boards.net/page/my-book-2
I wanted to have an accordion of sorts on my book lists so, once they get longer (and they most likely will in the coming years), I want to make sure that the Table of Contents doesn't take up the whole page when someone first lands on the page.
I just wanted to ask if this was possible before attempting to do it. I also had a few questions about the CSS, as well -- ones that I cannot figure out myself--and are kind of perplexing me.
I have the following code in a Custom Page on another forum that I own (the live example would be here.) I wanted to duplicate it onto this forum (change the classes and such, but keep the functionality of the accordion itself), so the page doesn't look so long, as I said above.
I wanted to take one section of this (for example, Frequently Asked Questions about Reiki III since it has the same number of accordion dropdown I would require), and duplicate it on the page linked above. I wanted to duplicate it twice, once where the Stand-alone Books are and once where the Series Books are.
I was going to have three accordions on both, but have "Coming Soon" on the second two of the Series Books accordion.
I wanted to make it so the accordions themselves were centered on top of their respective div "column" (for lack of a better word choice). I'm thinking that I would use padding-left and padding-right for that, right?
Right now, though, when I attempt to move the Series Books div or the Stand-alone Books div with padding, it doesn't function that way anymore--nothing happens when I post put the padding into the CSS on the Style Sheet. It did once before, but I'm unsure what happened to it. I'm wondering if something didn't save when my power went out this afternoon, but everything looked to be in its place, so I'm confused on that one big time. I'm thinking I'd have to fix that before I attempt to create the accordion around it, right?
I think that that's it. Thank you for your opinions/suggestions/help!
I wanted to have an accordion of sorts on my book lists so, once they get longer (and they most likely will in the coming years), I want to make sure that the Table of Contents doesn't take up the whole page when someone first lands on the page.
I just wanted to ask if this was possible before attempting to do it. I also had a few questions about the CSS, as well -- ones that I cannot figure out myself--and are kind of perplexing me.
Questions about the Accordion
<!-------------------------------------------------------------
===============================================================
START CUSTOM PAGE HTML
===============================================================
-------------------------------------------------------------->
<div class="AlanReikiMasterBG">
<img class="reiki-kanji-top-left" src="//storage.proboards.com/6033396/images/kqTAWrOxych18ZdTIClP.png" />
<img class="reiki-kanji-top-right" src="//storage.proboards.com/6033396/images/kqTAWrOxych18ZdTIClP.png" />
<img class="reiki-kanji-bottom-left" src="//storage.proboards.com/6033396/images/kqTAWrOxych18ZdTIClP.png" />
<img class="reiki-kanji-bottom-right" src="//storage.proboards.com/6033396/images/kqTAWrOxych18ZdTIClP.png" />
<img class="AlanReikiMasterPic" src="http://storage.proboards.com/6033396/images/HLieDzT9jFyiBJTOYiJn.png">
<a style="color:#ffffff" target="_blank" href="http://psychic-psyghtings.proboards.com/user/1">
<p class="AlanReikiMasterDesc">Alan Vende<br>Reiki Master/Teacher</p>
</a>
</div>
</div>
<div class="container boards">
<div class="title-bar Reiki-TOC">
<h3 align="center">Usui Reiki Ryoho FAQ Table of Contents</h3>
</div>
<div class="content">
<img class="reiki-kanji-1" src="//storage.proboards.com/6033396/images/kqTAWrOxych18ZdTIClP.png" />
<img class="reiki-kanji-2" src="//storage.proboards.com/6033396/images/kqTAWrOxych18ZdTIClP.png" />
<div class="TOC-Contents">
<p><a href="#Reiki-FAQ">General Reiki FAQ</a></p>
<br />
<p><a href="#Reiki-I-FAQ">Frequently Asked Questions about Usui Reiki I</a></p>
<br />
<p><a href="#Reiki-II-FAQ">Frequently Asked Questions about Usui Reiki II</a></p>
<br />
<p><a href="#Reiki-III-FAQ">Frequently Asked Questions about Usui Reiki III</a></p>
</div>
</div>
</div>
<!-- BEGIN GENERAL QUESTIONS ABOUT USUI CODE -->
<div class="all-encompassing-background">
<div class="General-Questions-Reiki">
<h3 style="font-weight:bold" align="center" class="Reiki-Question-Title">
<a name="Reiki-FAQ" class="Reiki-Question-Title">General Questions about Reiki</a> <a class="usui-backtotop" onclick="scroll(0,0);">Back to the Top</a>
</h3>
</div>
<!-- Begin HTML -->
<button class="accordion">Why do you keep the Usui Reiki Symbols secret?</button>
<div class="gqr-panel">
<p>The Usui Reiki Symbols are meant to be kept a secret because they are only meant to be seen by the students who are Initiated into Reiki through the Attunement ceremony. Anther reason that they are kept secret is that they do not work if you are not attuned to the energy that they emit. If you are not attuned, they are, in essence, useless.</p>
</div>
<button class="accordion">How many levels are in Usui Reiki?</button>
<div class="gqr-panel">
<p>There are three levels to Usui Reiki: Level I, Level II, and Level III.</p><br />
<p><strong>Level I</strong> is the history of Usui Reiki.</p><br />
<p><strong>Level II</strong> is learning how to give a Reiki healing session in person as well as distantly.</p><br />
<p><strong>Level III</strong> is learning how to conduct Reiki Attunements.</p>
</div>
<button class="accordion">Is there a time limit in order to become a Reiki Master and/or a Reiki Master-Teacher?</button>
<div class="gqr-panel">
<p>There is no time limit, no. You are free to take as long as you want to become a Reiki Master or Reiki Master/Teacher; it's whatever you choose to do. It's your journey, so you can go as far as you want with your learning of Reiki.</p>
</div>
<button class="accordion">Do you have to wait six months between each level of Reiki?</button>
<div class="gqr-panel">
<p>Some teachers require that you wait six months between each level of Reiki, but if you search around, you will notice that one may require three months between Reiki I and Reiki II and then one month between Reiki II and Reiki III.</p><br />
<p>You may also notice that another teacher requires six months between all three levels.</p><br />
<p>There may also be another teacher that doesn't require any time between the levels and will do them within a three-day span of time, like over a long weekend.</p><br />
<p>I was personally taught Reiki and given the attunements within a day because that is all the time that my teacher was allowed to do due to her schedule. It all depends on the teacher.</p>
</div>
<button class="accordion">How long are Reiki classes?</button>
<div class="gqr-panel">
<p>The length of time for each level of Reiki (Reiki I, II, and III) depend on the teacher/institution in which you do your Reiki training with.</p><br />
<p>Depending on the teacher's preference, Reiki I and II can be taught together or separately, and the same goes for ART and Reiki Master/Teacher.</p>
</div>
<button class="accordion">Do I have to "renew" my Reiki Initations?</button>
<div class="gqr-panel">
<p>No. Once you are Initiated to Reiki energy, you do not have to be re-initiated into it. You are able to use Reiki for the rest of your life. You can, if you want to, have the attunements again, but it's not necessary to do so.</p>
</div>
<!-- <button class="accordion">Section 7</button>
<div class="gqr-panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 8</button>
<div class="gqr-panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 9</button>
<div class="gqr-panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 10</button>
<div class="gqr-panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 11</button>
<div class="gqr-panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 12</button>
<div class="gqr-panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 13</button>
<div class="gqr-panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 14</button>
<div class="gqr-panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 15</button>
<div class="gqr-panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 16</button>
<div class="gqr-panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 17</button>
<div class="gqr-panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 18</button>
<div class="gqr-panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 19</button>
<div class="gqr-panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 20</button>
<div class="gqr-panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 21</button>
<div class="gqr-panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 22</button>
<div class="gqr-panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 23</button>
<div class="gqr-panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 24</button>
<div class="gqr-panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 25</button>
<div class="gqr-panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 26</button>
<div class="gqr-panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 27</button>
<div class="gqr-panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 28</button>
<div class="gqr-panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 29</button>
<div class="gqr-panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 30</button>
<div class="gqr-panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 31</button>
<div class="gqr-panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 32</button>
<div class="gqr-panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 33</button>
<div class="gqr-panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 34</button>
<div class="gqr-panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 35</button>
<div class="gqr-panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 36</button>
<div class="gqr-panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 37</button>
<div class="gqr-panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 38</button>
<div class="gqr-panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 39</button>
<div class="gqr-panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 40</button>
<div class="gqr-panel">
<p>Lorem ipsum...</p>
</div> -->
</div>
<!-- END GENERAL QUESTIONS ABOUT USUI REIKI CODE -->
<!-- BEGIN USUI REIKI I CODE -->
<div class="all-encompassing-background">
<div class="Usui-Reiki-I">
<h3 style="font-weight:bold" align="center" class="Reiki-Question-Title">
<a name="Reiki-I-FAQ" class="Reiki-Question-Title">Frequently Asked Questions about Usui Reiki I</a> <a class="usui-backtotop" onclick="scroll(0,0);">Back to the Top</a>
</h3>
</div>
<!-- Begin HTML -->
<button class="accordion">Why are there no symbols taught in Reiki I?</button>
<div class="panel-1">
<p>There are no symbols taught in Reiki I because you you are taught the history and the fundamentals of Reiki in this level.</p>
</div>
<button class="accordion">How many hours is the class for Reiki I?</button>
<div class="panel-1">
<p>The Reiki I class is approximately five (5) hours.</p>
</div>
<!-- <button class="accordion">Section 3</button>
<div class="panel-1">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 4</button>
<div class="panel-1">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 5</button>
<div class="panel-1">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 6</button>
<div class="panel-1">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 7</button>
<div class="panel-1">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 8</button>
<div class="panel-1">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 9</button>
<div class="panel-1">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 10</button>
<div class="panel-1">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 11</button>
<div class="panel-1">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 12</button>
<div class="panel-1">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 13</button>
<div class="panel-1">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 14</button>
<div class="panel-1">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 15</button>
<div class="panel-1">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 16</button>
<div class="panel-1">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 17</button>
<div class="panel-1">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 18</button>
<div class="panel-1">
<p>Lorem ipsum...</p>
</div>
<!-- <button class="accordion">Section 19</button>
<div class="panel-1">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 20</button>
<div class="panel-1">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 21</button>
<div class="panel-1">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 22</button>
<div class="panel-1">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 23</button>
<div class="panel-1">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 24</button>
<div class="panel-1">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 25</button>
<div class="panel-1">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 26</button>
<div class="panel-1">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 27</button>
<div class="panel-1">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 28</button>
<div class="panel-1">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 29</button>
<div class="panel-1">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 30</button>
<div class="panel-1">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 31</button>
<div class="panel-1">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 32</button>
<div class="panel-1">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 33</button>
<div class="panel-1">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 34</button>
<div class="panel-1">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 35</button>
<div class="panel-1">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 36</button>
<div class="panel-1">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 37</button>
<div class="panel-1">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 38</button>
<div class="panel-1">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 39</button>
<div class="panel-1">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 40</button>
<div class="panel-1">
<p>Lorem ipsum...</p>
</div> -->
</div>
<!-- END USUI REIKI I CODE -->
<!-- BEGIN USUI REIKI II CODE -->
<div class="all-encompassing-background">
<div class="Usui-Reiki-II">
<h3 style="font-weight:bold" align="center" class="Reiki-Question-Title">
<a name="Reiki-II-FAQ" class="Reiki-Question-Title">Frequently Asked Questions about Usui Reiki II</a> <a class="usui-backtotop" onclick="scroll(0,0);">Back to the Top</a>
</h3>
</div>
<!-- Begin HTML -->
<button class="accordion">How many hours is the class for Reiki II?</button>
<div class="panel-2">
<p>The class for Reiki II is approximatley five (5) hours.</p>
</div>
<!-- <button class="accordion">Section 2</button>
<div class="panel-2">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 3</button>
<div class="panel-2">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 4</button>
<div class="panel-2">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 5</button>
<div class="panel-2">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 6</button>
<div class="panel-2">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 7</button>
<div class="panel-2">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 8</button>
<div class="panel-2">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 9</button>
<div class="panel-2">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 10</button>
<div class="panel-2">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 11</button>
<div class="panel-2">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 12</button>
<div class="panel-2">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 13</button>
<div class="panel-2">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 14</button>
<div class="panel-2">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 15</button>
<div class="panel-2">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 16</button>
<div class="panel-2">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 17</button>
<div class="panel-2">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 18</button>
<div class="panel-2">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 19</button>
<div class="panel-2">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 20</button>
<div class="panel-2">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 21</button>
<div class="panel-2">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 22</button>
<div class="panel-2">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 23</button>
<div class="panel-2">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 24</button>
<div class="panel-2">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 25</button>
<div class="panel-2">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 26</button>
<div class="panel-2">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 27</button>
<div class="panel-2">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 28</button>
<div class="panel-2">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 29</button>
<div class="panel-2">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 30</button>
<div class="panel-2">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 31</button>
<div class="panel-2">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 32</button>
<div class="panel-2">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 33</button>
<div class="panel-2">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 34</button>
<div class="panel-2">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 35</button>
<div class="panel-2">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 36</button>
<div class="panel-2">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 37</button>
<div class="panel-2">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 38</button>
<div class="panel-2">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 39</button>
<div class="panel-2">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 40</button>
<div class="panel-2">
<p>Lorem ipsum...</p>
</div> -->
</div>
<!-- END USUI REIKI II CODE -->
<!-- BEGIN USUI REIKI III CODE -->
<div class="all-encompassing-background">
<div class="Usui-Reiki-III">
<h3 style="font-weight:bold" align="center" class="Reiki-Question-Title">
<a name="Reiki-III-FAQ" class="Reiki-Question-Title">Frequently Asked Questions about Usui Reiki III</a> <a class="usui-backtotop" onclick="scroll(0,0);">Back to the Top</a>
</h3>
</div>
<!-- Begin HTML -->
<button class="accordion">How many hours is the class for Reiki III?</button>
<div class="panel-3">
<p>The class for Reiki III is approximately 15 hours of class time.</p>
<br />
<p>See <a style="color:#66ff66" href="#WhyReikiIII">Why is Reiki III split into three days of instruction?</a> for more information.</p>
</div>
<button class="accordion"><a style="color:#000000" name="WhyReikiIII">Why is Reiki III split into three days of instruction?</a></button>
<div class="panel-3">
<p>Reiki III is split into three days of instruction because you are actually learning two parts in Reiki III: <strong>Advanced Reiki Training (ART)</strong> and <strong>Reiki Master/Teacher</strong>. They're taught together instead of separately.</p>
<br />
<p>Another reason that this level is split into three days of five hour classes, so they're the same amount of time as the other levels. I don't want Reiki students to be bombarded with too much information all at once and experience sensory overload. Learning and experiencing Reiki is supposed to be a wonderful journey and long classes where you have to sit and listen to a person speak without any breaks or anything of that nature is not conducive to a well-energied learning environment.</p>
</div>
<button class="accordion">Is there any test that has to be completed to become a Reiki Master/Teacher?</button>
<div class="panel-3">
<p>There is no test that has to be completed to become a Reiki Master/Teacher per se, but you must be able to draw the Usui Reiki Symbols from memory.</p>
</div>
<!-- <button class="accordion">Section 4</button>
<div class="panel-3">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 5</button>
<div class="panel-3">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 6</button>
<div class="panel-3">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 7</button>
<div class="panel-3">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 8</button>
<div class="panel-3">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 9</button>
<div class="panel-3">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 10</button>
<div class="panel-3">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 11</button>
<div class="panel-3">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 12</button>
<div class="panel-3">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 13</button>
<div class="panel-3">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 14</button>
<div class="panel-3">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 15</button>
<div class="panel-3">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 16</button>
<div class="panel-3">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 17</button>
<div class="panel-3">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 18</button>
<div class="panel-3">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 19</button>
<div class="panel-3">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 20</button>
<div class="panel-3">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 21</button>
<div class="panel-3">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 22</button>
<div class="panel-3">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 23</button>
<div class="panel-3">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 24</button>
<div class="panel-3">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 25</button>
<div class="panel-3">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 26</button>
<div class="panel-3">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 27</button>
<div class="panel-3">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 28</button>
<div class="panel-3">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 29</button>
<div class="panel-3">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 30</button>
<div class="panel-3">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 31</button>
<div class="panel-3">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 32</button>
<div class="panel-3">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 33</button>
<div class="panel-3">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 34</button>
<div class="panel-3">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 35</button>
<div class="panel-3">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 36</button>
<div class="panel-3">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 37</button>
<div class="panel-3">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 38</button>
<div class="panel-3">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 39</button>
<div class="panel-3">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 40</button>
<div class="panel-3">
<p>Lorem ipsum...</p>
</div> -->
</div>
<!-- END USUI REIKI III CODE -->
<!-- End HTML -->
<!-- Begin JavaScript -->
<!--
Toggle between adding and removing the "active" and "show" classes when the user clicks on one of the "Section" buttons.
The "active" class is used to add a background color to the current button when its belonging panel is open.
The "show" class is used to open the specific accordion panel
-->
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
</script>
<!-- End JavaScript -->I wanted to take one section of this (for example, Frequently Asked Questions about Reiki III since it has the same number of accordion dropdown I would require), and duplicate it on the page linked above. I wanted to duplicate it twice, once where the Stand-alone Books are and once where the Series Books are.
I was going to have three accordions on both, but have "Coming Soon" on the second two of the Series Books accordion.
I wanted to make it so the accordions themselves were centered on top of their respective div "column" (for lack of a better word choice). I'm thinking that I would use padding-left and padding-right for that, right?
Right now, though, when I attempt to move the Series Books div or the Stand-alone Books div with padding, it doesn't function that way anymore--nothing happens when I post put the padding into the CSS on the Style Sheet. It did once before, but I'm unsure what happened to it. I'm wondering if something didn't save when my power went out this afternoon, but everything looked to be in its place, so I'm confused on that one big time. I'm thinking I'd have to fix that before I attempt to create the accordion around it, right?
I think that that's it. Thank you for your opinions/suggestions/help!
