Rotating arrow on accordion menu - css

Question

Brand new here and a total novice, so please forgive me for the multiple faux pas I'm committing. I'm trying to make a widget for an iBook, that will have expandable information. Given that the space is limited, trying to use an accordion to do so. Through multiple iterations (some solely CSS, others with CSS+jQuery) I've landed on below, which I'm happy with except can't get the second arrow to rotate correctly. Is it possible using the radio/checked method?
My code is below (Fiddle Link)
CSS:
body {
font-family:’Arial’, sans-serif;
}
.accordion {
margin: 0 auto;
width: 400px;
}
.accordion > label {
display: block;
}
.rotate {
padding:0;
margin:-2px 0 0 0px;
line-height:20px;
width:13px;
position:absolute;
transition: all 1s ease;
-o-transition: all 1s ease;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
}
.accordion > input {
display: none;
}
.accordion > div {
max-height: 0;
overflow: hidden;
}
.accordion > input:checked + label + div {
max-height: 500px;
}
.accordion > div > * {
margin: 10px;
}
.accordion > input:checked + label {
background-color: rgba(19,14,109,0.21);
}
.accordion > label {
background-color: rgba(19,14,109,0.08);
border: 1px solid gray;
color: black;
cursor: pointer;
font-weight: bold;
padding: 4px 10px;
}
.accordion > div {
border-bottom: 1px solid gray;
border-left: 1px solid gray;
border-right: 1px solid gray;
-webkit-transition: all ease-in-out 1000ms;
-moz-transition: all ease-in-out 1000ms;
-o-transition: all ease-in-out 1000ms;
transition: all ease-in-out 1000ms;
}
input[name='accordion1'] ~ .rotate {
transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
input[name='accordion1']:checked ~ label .rotate {
transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
HTML
<div class="accordion">
<input id="acrd1-item1" name="accordion1" type="radio"checked>
<label for="acrd1-item1"><div class="rotate">▶</div>&nbsp &nbsp Common ICU Sedatives</label>
<div>
<p>
<ul type=“circle”>
<li><b>Propofol</b></li>
<ul type=“disc”>
<li>Dosing: 50 - 200mg/hr, 1-3mg/kg/hr</li>
<li>Benefits: Half-life of 30-60 minutes</li>
<li>Adverse effect: Hypotension, bradycardia, hypertriglyceridemia, pancreatitis</li>
</ul>
<li><b>Dexmedetomidine</b></li>
<ul type = “disc”>
<li>Dosing: 0.2 - 1.5 mcg/kg/hr</li>
<li>Benefits: No respiratory suppression</li>
<li>Adverse effects: Transient hypertension, then hypotension and bradycardia</li>
</ul>
<li><b>Midazolam</b></li>
<ul type=“disc”>
<li>Dosing: Bolus, 1-5 mg, 1-5 mg/hr</li>
<li>Benefits: Less hypotension</li>
<li>Adverse effects: Long half-life (3-11 hrs), high risk of delirium and tolerance</li>
</ul>
</ul>
</p>
</div>
<input id="acrd1-item2" name="accordion1" type="radio">
<label for="acrd1-item2"><div class="rotate">▶</div>&nbsp &nbsp Common ICU analgesics</label>
<div><p>
<ul type=“circle”>
<li><b>Fentanyl</b></li>
<ul type=“disc”>
<li>Dosing: 20-100 mcg/hr; consider loading dose of 50 to 100mcg</li>
<li>Adverse Effect: Respiratory depression, hypotension</li>
</ul>
<li><b>Morphine</b></li>
<ul type = “disc”>
<li>Dosing: 1-5mg/hr, consider loading dose 2-5 mg</li>
<li>Adverse Effect: Metabolite renally excreted, known to cause neurotoxicity, respiratory depression, histamine release</li>
</ul>
</ul>
</p></div>
Thanks so much in advance.

Answer 1

You just need to place the second block in a div.accordian like so:
<div class="accordion">
<input id="acrd1-item1" name="accordion1" type="radio"checked>
...
</div>
<div class="accordion">
<input id="acrd1-item2" name="accordion1" type="radio">
...
</div>
After it works like magic.
Here is the updated Fiddle
If you have any more question, don't hesitate to ask.