Yes sorry, i cant post a link as its on a VPN and also the code is huge from source so have done my best to only show what I need.
<div class="moduleQuestionnairePanel" id="pnlFullQuestionnaire" style="">
<div id="accordionCategory2">
<div class="card">
<div class="card-header" id="headingCategory2">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#clpCategory2" aria-expanded="true" aria-controls="clpCategory2">
First Category
</button>
</h5>
</div>
<div id="clpCategory2" class="collapse show" aria-labelledby="headingCategory2" data-parent="#accordionCategory2" style="">
<div class="card-body">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<div id="accordion">
<div class="card">
<div class="card-header">
<h5 class="mb-0">
<button class="card-link" data-toggle="collapse" data-parent="#accordion" href="#clpSection2">
First Section
</button>
</h5>
</div>
<div id="clpSection2" class="collapse show">
<div class="card-body">
<div class="accordion" id="accordionQuestion4">
<div class="card">
<div class="card-header" id="headingQuestion4">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#clpQuestion4" aria-expanded="true" aria-controls="clpQuestion4">
1. One
</button>
</h5>
</div>
<div id="clpQuestion4" class="collapse show" aria-labelledby="headingQuestion4" data-parent="#accordionQuestion4" style="">
<div class="card-body">
<form action="/Questionnaire/SubmitAnswer" class="questionForm" data-ajax="true" data-ajax-method="POST" data-ajax-success="ProcessAjaxFormResponse" id="frmQuestion4" method="post"><input data-val="true" data-val-number="The field QuestionID must be a number." data-val-required="The QuestionID field is required." id="QuestionID" name="QuestionID" value="4" type="hidden"><input data-val="true" data-val-number="The field Int64 must be a number." data-val-required="The Int64 field is required." id="recordID" name="recordID" value="1" type="hidden"> <div>
<input data-val="true" data-val-number="The field ChoiceID must be a number." id="hdnChoiceID4" name="ChoiceID" value="7" type="hidden">
<button type="button" id="btnQ4C7" class="choice-btn btn btn-info active" data-choice-id="7" data-question-id="4" data-model-field="#hdnChoiceID4">Yes</button>
<button type="button" id="btnQ4C8" class="choice-btn btn btn-info " data-choice-id="8" data-question-id="4" data-model-field="#hdnChoiceID4">Maybe</button>
<button type="button" id="btnQ4C9" class="choice-btn btn btn-success" data-choice-id="9" data-question-id="4" data-model-field="#hdnChoiceID4">No</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="accordion" id="accordionQuestion5">
<div class="card">
<div class="card-header" id="headingQuestion5">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#clpQuestion5" aria-expanded="true" aria-controls="clpQuestion5">
2. Two
</button>
</h5>
</div>
<div id="clpQuestion5" class="collapse show" aria-labelledby="headingQuestion5" data-parent="#accordionQuestion5" style="">
<div class="card-body">
<form action="/Questionnaire/SubmitAnswer" class="questionForm" data-ajax="true" data-ajax-method="POST" data-ajax-success="ProcessAjaxFormResponse" id="frmQuestion5" method="post"><input data-val="true" data-val-number="The field QuestionID must be a number." data-val-required="The QuestionID field is required." id="QuestionID" name="QuestionID" value="5" type="hidden"><input data-val="true" data-val-number="The field Int64 must be a number." data-val-required="The Int64 field is required." id="recordID" name="recordID" value="1" type="hidden"> <div>
<input data-val="true" data-val-number="The field ChoiceID must be a number." id="hdnChoiceID5" name="ChoiceID" value="10" type="hidden">
<button type="button" id="btnQ5C10" class="choice-btn btn btn-info active" data-choice-id="10" data-question-id="5" data-model-field="#hdnChoiceID5">Yes</button>
<button type="button" id="btnQ5C11" class="choice-btn btn btn-info " data-choice-id="11" data-question-id="5" data-model-field="#hdnChoiceID5">No</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Hopefully that gives you some idea, there a lot to it, but basically there a top level category, that opens to reveal sections, and then within them there are question.
What Im am then going to try and do if it can be done, is use jquery to dictate these background colors, as I thikn the plan is that we give clients the opportunity to decide a background colour for themselves, and this accordian effect will take that prime colour and decrease the opacity of the rgb values via a loop of some sort. Passing the prime colour to the function from the database, but first things first, im trying to manually effect the background colours through the css file.
I think thinking forward to the jscript, what I’m essentially working towards is setting the first card-header class as the solid colour, then in the second card-header class the opacity decreases by say 0.2, and then the third decreases by 0.4 and so on. Its weather i can say do this, as an example, something like this, its whether you can say set the first class to be this colour, then look for the next one and change its background colour to this
<script>
$(".card .card-header").css("background-color", "rgba(0,0,0,.8)");
$(".card .card-header").next(".card .card-header").css("background-color", "rgba(0,0,0,.6)");
</script>
