Just wondering whether anyone can help me with collapsible / expandable / accordion sections for my webpage?
I need to have a heading which when clicked on will expand to reveal a bullet pointed list, and then collapse again when clicked on.
Does anyone have any coding for this at all without me having to go to our developers for something I think could be so simple?
<h1>Fever</h1>
<h2>Definition / Supporting Information</h2>
<p>Fever is defined as an increase in body temperature. There is no single value that defines fever, as this will depend on the method of assessment.</p>
<h2>Treatment Approach</h2>
<p>Treatment should progress only after the ABCs (airway, breathing, and circulation) of resuscitation have been addressed.</p>
<p>See also Fever in under 5s: assessment and initial management <a href="http://www.nice.org.uk/guidance/cg160/chapter/recommendations#management-by-the-paediatric-specialist-2">[NICE clinical guideline 160, section 1.5.6–1.6]</a></p>
<p><strong>Non-specialist practitioners</strong></p>
<p>To be undertaken by non-specialist practitioners (eg, GP / Non-Paediatric Emergency Department Team(s)) or specialist practitioners (eg, Paediatric / Paediatric Emergency Department Team(s)):</p>
<ul>
<li>Give parenteral antibiotics to children with suspected meningococcal disease at the earliest opportunity, either in primary or secondary care (either benzylpenicillin sodium or a third-generation cephalosporin such as cefotaxime or ceftriaxone).
<ul>
<li>Do not delay urgent transfer to hospital to give the parenteral antibiotics.</li>
</ul>
</li>
</ul>
<p><strong>Specialist practitioners</strong></p>
<p>To be undertaken by specialist practitioners (eg, Paediatric / Paediatric Emergency Department Team(s)):</p>
<ul>
<li>When parenteral antibiotics are indicated, a third-generation cephalosporin (eg, cefotaxime or ceftriaxone) should be given, until culture results are available.<br />
<ul>
<li>For children younger than 3 months, an antibiotic active against listeria (eg, ampicillin or amoxicillin) should also be given.</li>
</ul>
</li>
</ul>
<p> </p>
What I would like is for the ‘Non-specialist practitioners’ and ‘Specialist practitioners’ sections of the below code to be the expandable/collapsible sections - where would I need to add the appropriate code in to the below and any tips on what I need to add specifically?
I gave you a solution to this problem on the 13th December, 2017 here…
Your reply to it was…
For those who may not wish to click the link, here is the solution code…
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
body {
background-color: #f0f0f0;
font: 1em/162% verdana, arial, helvetica, sans-serif;
}
h1 {
text-align: center;
}
#container {
max-width: 62.5em;
padding: 1em;
margin: auto;
border: 0.062em solid #999;
background-color: #fff;
color: #444;
overflow: hidden;
}
.displayLinks{
float: left;
clear: both;
padding: 0.25em 0.5em;
margin: 0.25em 0;
font-weight: bold;
color: #444;
text-decoration: none;
}
#nonspec, #spec {
display: none;
clear: both;
padding:1em;
margin: 0.5em 1em;
border: 0.062em dotted #999;
}
#nonspec:target, #spec:target {
display: block;
}
</style>
</head>
<body>
<h1>Fever</h1>
<div id="container">
<h2>Definition / Supporting Information</h2>
<p>
Fever is defined as an increase in body temperature.
There is no single value that defines fever, as this
will depend on the method of assessment.
</p>
<h2>Treatment Approach</h2>
<p>
Treatment should progress only after the ABCs (airway,
breathing, and circulation) of resuscitation have been
addressed.
</p><p>
See also Fever in under 5s: assessment and
initial management
<a href="http://www.nice.org.uk/guidance/cg160/chapter/recommendations#management-by-the-paediatric-specialist-2">
[NICE clinical guideline 160, section 1.5.6 - 1.6]
</a>
</p>
<a class="displayLinks" href="#nonspec" title="click for detailed information">Non-specialist practitioners</a>
<div id="nonspec">
<p>
To be undertaken by non-specialist practitioners (eg, GP /
Non-Paediatric Emergency Department Team(s)) or
specialist practitioners (eg, Paediatric / Paediatric
Emergency Department Team(s)):
</p>
<ul>
<li>
Give parenteral antibiotics to children with suspected
meningococcal disease at the earliest opportunity, either
in primary or secondary care (either benzylpenicillin
sodium or a third-generation cephalosporin such as cefotaxime or ceftriaxone).
<ul>
<li>
Do not delay urgent transfer to hospital to give the
parenteral antibiotics.
</li></ul>
</li>
</ul>
<a href="#container">close</a>
<!-- #nonspec --></div>
<a class="displayLinks" href="#spec" title="click for detailed information">Specialist practitioners</a>
<div id="spec">
<p>
To be undertaken by specialist practitioners (eg, Paediatric /
Paediatric Emergency Department Team(s)):
</p>
<ul>
<li>
When parenteral antibiotics are indicated, a third-generation
cephalosporin (eg, cefotaxime or ceftriaxone) should be given,
until culture results are available.
<ul>
<li>
For children younger than 3 months, an antibiotic active against
listeria (eg, ampicillin or amoxicillin) should also be given.
</li></ul>
</li>
</ul>
<a href="#container">close</a>
<!-- #spec --></div>
<!-- #container --></div>
</body>
</html>
this technique does not work on any of the older browsers that do not support CSS3 :checked pesudo
This is very useful it makes use of checkbox s or radio’s to pull this off.
HTML:
<h1>Fever</h1>
<h2>Definition / Supporting Information</h2>
<p>Fever is defined as an increase in body temperature. There is no single value that defines fever, as this will depend on the method of assessment.</p>
<h2>Treatment Approach</h2>
<p>Treatment should progress only after the ABCs (airway, breathing, and circulation) of resuscitation have been addressed.</p>
<p>See also Fever in under 5s: assessment and initial management <a href="http://www.nice.org.uk/guidance/cg160/chapter/recommendations#management-by-the-paediatric-specialist-2">[NICE clinical guideline 160, section 1.5.6–1.6]</a></p>
<!-- apply container around the input checkbox/radio to help reduce amount of css required -->
<div class="container">
<input type="checkbox" id="check1" /> <!-- css styled to hide the input box and used labels to target -->
<label for="check1">Non-specialist practitioners</label>
<div class="hidden"> <!-- wrapped the content that is being hidden for kabel to target it -->
<p>To be undertaken by non-specialist practitioners (eg, GP / Non-Paediatric Emergency Department Team(s)) or specialist practitioners (eg, Paediatric / Paediatric Emergency Department Team(s)):</p>
<ul>
<li>Give parenteral antibiotics to children with suspected meningococcal disease at the earliest opportunity, either in primary or secondary care (either benzylpenicillin sodium or a third-generation cephalosporin such as cefotaxime or ceftriaxone).</li>
<li class="red">!Do not delay urgent transfer to hospital to give the parenteral antibiotics!</li>
</ul>
</div>
</div>
<!-- apply container around the input checkbox/radio to help reduce amount of css required -->
<div class="container">
<input type="checkbox" id="check2" /><!-- css styled to hide the input box and used labels to target -->
<label for="check2">Specialist practitioners</label>
<div class="hidden"><!-- wrapped the content that is being hidden for label to target it -->
<p>To be undertaken by specialist practitioners (eg, Paediatric / Paediatric Emergency Department Team(s)):</p>
<ul>
<li>When parenteral antibiotics are indicated, a third-generation cephalosporin (eg, cefotaxime or ceftriaxone) should be given, until culture results are available.</li>
<li class="red">!For children younger than 3 months, an antibiotic active against listeria (eg, ampicillin or amoxicillin) should also be given.!</li>
</ul>
</div>
</div>
CSS:
/* Visual effects */
.red{
padding:10px 0px;
color:#511;
font-weight:bold;
}
.container label{ /* style this as these are your "non-special" and "special" text */
background-color:RGBA(150, 150, 150, 0.7);
display:block;
padding:0px 10px;
font-weight:bold;
font-size:1.05em;
color:#111;
cursor:pointer;
}
.container{ /* style this to position where or how the content should look */
display:block;
margin:0px 0px 10px 0px;
}
/* required for Css "Hacks" */
.container input{ /* this is not necessary to show unless using fancy css styles/effects */
display:block
}
.hidden{ /* style this weather you want the content to be visible or not on page load */
display:none;
}
.container input:checked ~ #hidden{ /* make sure display here is opposite to the hidden id */
display:block;
}
If you wish to only open one heading and not the other replace the type="checkbox" to type="radio" and give the input fields a name="" the names must be the same for this to work.
Thank you, and no I am not suffering from amnesia.
The coding you provided was VERY VERY helpful and is what I am going with right now, abet a few tweeks here and there; however, as nobody else from that forum replied I thought I would try elsewhere to gather an all-rounded answer with variables that I could try.
