Boostrap card-header background color


#1

I am using bootstrap cards to build an accordion click and show system, and the css below deals with the header colours, but what I would like to have is a way of setting the parent top level background colour, and then have a slightly lighter background colour for each level, or each child as such.

Like this, but its not working:

.card-header {
    padding: .75rem 1.25rem;
    margin-bottom: 0;
    background-color: rgba(0,0,0,.8);
    border-bottom: 1px solid rgba(0,0,0,.8);
}

.card-header:first-child {
    background-color: rgba(0,0,0,.6);
    border-bottom: 1px solid rgba(0,0,0,.6);
}

the first-child class is now setting the background colour for all the levels.


#2

Hi there multichild,

a glimpse of the HTML in question would be rather helpful. :winky:

coothead


#3

#4

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>

#5

Hi there multichild,

it is not possible as it stands. :unhappy:

If you able to amend the HTML and CSS,
then you could achieve it like this...

<!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: #f9f9f9;
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
 }
 
.card-header {
    padding: 0.75rem 1.25rem;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(0,0,0,0.8);
}

.card-header {
    border-bottom: 1px solid rgba(0,0,0,0.6);
}

.header0 {
    background-color: rgba(0,0,0,0.8);
 }
 
.header1 {
    background-color: rgba(0,0,0,0.6);
 }
 
.header2 {
    background-color: rgba(0,0,0,0.4);
 }
.header3 {
    background-color: rgba(0,0,0,0.2);
 }
</style>

</head>
<body> 


<div class="moduleQuestionnairePanel" id="pnlFullQuestionnaire">

<div id="accordionCategory2">
    <div class="card ">
        <div class="card-header header0" 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">


<div id="accordion">
    <div class="card">
        <div class="card-header header1">
            <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 header2" 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 header3" 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>

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

</body>
</html>

coothead


#6

Yes I can see what your doing, taht could work in jscript too adding the numeric value in a loop.

Cheers


#7

Hi there multichild,

if you wanted to do it with javascript, then classes header0 to header3
can be added to the HTML like this..

<script>
(function( d ) {
    'use strict';
   var ch = d.getElementsByClassName( 'card-header' );
      for( var c = 0; c < ch.length; c ++  ) {
           ch[ c ].classList.add('header' + c );
      }
}( document ));
</script>

coothead


#8

OMG yes thats brilliant, so that script adds a new class header with an int to each value of .card-header, I can see it, Ive just [asted it saved, refreshed and was very excited but it didnt work, but yes its exactly what I need.


#9

It worked OK in my test browsers; IE11, Firefox and Chrome. :winky:

coothead


#10

This is how each of those sections print out in source, there can be an unlimied number of them but they all uniform

So this is the first category section, followed by the second category section. I really want this to work now, as its perfect

<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" aria-labelledby="headingQuestion4" data-parent="#accordionQuestion4">
            <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" type="hidden" value="4" /><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" type="hidden" value="1" />    <div>
        <input data-val="true" data-val-number="The field ChoiceID must be a number." id="hdnChoiceID4" name="ChoiceID" type="hidden" value="7" />
            <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-info " 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" aria-labelledby="headingQuestion5" data-parent="#accordionQuestion5">
            <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" type="hidden" value="5" /><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" type="hidden" value="1" />    <div>
        <input data-val="true" data-val-number="The field ChoiceID must be a number." id="hdnChoiceID5" name="ChoiceID" type="hidden" value="10" />
            <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>

Second

<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="#clpSection3">
                    Second Section
                </button>
            </h5>
        </div>
        <div id="clpSection3" class="collapse show">
            <div class="card-body">
<div class="accordion" id="accordionQuestion6">
    <div class="card">
        <div class="card-header" id="headingQuestion6">
            <h5 class="mb-0">
                <button class="btn btn-link" data-toggle="collapse" data-target="#clpQuestion6" aria-expanded="true" aria-controls="clpQuestion6">
                    1. Three
                </button>
            </h5>
        </div>

        <div id="clpQuestion6" class="collapse" aria-labelledby="headingQuestion6" data-parent="#accordionQuestion6">
            <div class="card-body">
               <form action="/Questionnaire/SubmitAnswer" class="questionForm" data-ajax="true" data-ajax-method="POST" data-ajax-success="ProcessAjaxFormResponse" id="frmQuestion6" 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" type="hidden" value="6" /><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" type="hidden" value="1" />    <div>
        <input data-val="true" data-val-number="The field ChoiceID must be a number." id="hdnChoiceID6" name="ChoiceID" type="hidden" value="13" />
            <button type="button" id="btnQ6C12" class="choice-btn btn btn-info " data-choice-id="12" data-question-id="6" data-model-field=#hdnChoiceID6>Yes</button>
            <button type="button" id="btnQ6C13" class="choice-btn btn btn-info active" data-choice-id="13" data-question-id="6" data-model-field=#hdnChoiceID6>No</button>
    </div>
</form>
            </div>
        </div>
    </div>
</div>
<div class="accordion" id="accordionQuestion7">
    <div class="card">
        <div class="card-header" id="headingQuestion7">
            <h5 class="mb-0">
                <button class="btn btn-link" data-toggle="collapse" data-target="#clpQuestion7" aria-expanded="true" aria-controls="clpQuestion7">
                    2. Four
                </button>
            </h5>
        </div>

        <div id="clpQuestion7" class="collapse" aria-labelledby="headingQuestion7" data-parent="#accordionQuestion7">
            <div class="card-body">
               <form action="/Questionnaire/SubmitAnswer" class="questionForm" data-ajax="true" data-ajax-method="POST" data-ajax-success="ProcessAjaxFormResponse" id="frmQuestion7" 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" type="hidden" value="7" /><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" type="hidden" value="1" />    <div>
        <input data-val="true" data-val-number="The field ChoiceID must be a number." id="hdnChoiceID7" name="ChoiceID" type="hidden" value="14" />
            <button type="button" id="btnQ7C14" class="choice-btn btn btn-info active" data-choice-id="14" data-question-id="7" data-model-field=#hdnChoiceID7>Yes</button>
            <button type="button" id="btnQ7C15" class="choice-btn btn btn-info " data-choice-id="15" data-question-id="7" data-model-field=#hdnChoiceID7>No</button>
    </div>
</form>
            </div>
        </div>
    </div>
</div>
            </div>
        </div>
    </div>
</div>

#11

Ah hang on even though the new class doesnt add show in source code it does work, I added your cass for the headers to the css file, and it worked, but I cant see header0, header1 in the source when i right click on the page, sorry.

But hopefully you can help me out further as its absolutely brilliant that jscript, I have 2 sections within some categories, but only the first category got colour coded, leaving the second section as it is.

Then it loops out again with a new category, wish I could send you a link to it


#12

Hi there multichild,

You can only have one <div id="accordion"> per document.

Are you writing the this HTML?

coothead


#13

I have access to the html yes, but i was given this task so picked up the file from a previous developer.

As it goes the accordion wasn't working so I needed to work on that too.


#15

Hi there multichild,

if you have a multitude of sections, then code it like this...

<!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: #f9f9f9;
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
 }
body {
    background-color: #f9f9f9;
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
 }
 
.card-header {
    padding: 0.75rem 1.25rem;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(0,0,0,0.8);
}

.card-header {
    border-bottom: 1px solid rgba(0,0,0,0.6);
}

.header0 {
    background-color: rgba(0,0,0,0.8);
 }
 
.header1 {
    background-color: rgba(0,0,0,0.6);
 }
 
.header2 {
    background-color: rgba(0,0,0,0.4);
 }
.header3 {
    background-color: rgba(0,0,0,0.2);
 }
</style>

</head>
<body> 

<div class="section-holder">

<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" aria-labelledby="headingQuestion4" data-parent="#accordionQuestion4">
            <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" type="hidden" value="4" /><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" type="hidden" value="1" />    <div>
        <input data-val="true" data-val-number="The field ChoiceID must be a number." id="hdnChoiceID4" name="ChoiceID" type="hidden" value="7" />
            <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-info " 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" aria-labelledby="headingQuestion5" data-parent="#accordionQuestion5">
            <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" type="hidden" value="5" /><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" type="hidden" value="1" />    <div>
        <input data-val="true" data-val-number="The field ChoiceID must be a number." id="hdnChoiceID5" name="ChoiceID" type="hidden" value="10" />
            <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>

<!-- .section-holder --></div>

<div class="section-holder">

<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="#clpSection3">
                    Second Section
                </button>
            </h5>
        </div>
        <div id="clpSection3" class="collapse show">
            <div class="card-body">
<div class="accordion" id="accordionQuestion6">
    <div class="card">
        <div class="card-header" id="headingQuestion6">
            <h5 class="mb-0">
                <button class="btn btn-link" data-toggle="collapse" data-target="#clpQuestion6" aria-expanded="true" aria-controls="clpQuestion6">
                    1. Three
                </button>
            </h5>
        </div>

        <div id="clpQuestion6" class="collapse" aria-labelledby="headingQuestion6" data-parent="#accordionQuestion6">
            <div class="card-body">
               <form action="/Questionnaire/SubmitAnswer" class="questionForm" data-ajax="true" data-ajax-method="POST" data-ajax-success="ProcessAjaxFormResponse" id="frmQuestion6" 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" type="hidden" value="6" /><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" type="hidden" value="1" />    <div>
        <input data-val="true" data-val-number="The field ChoiceID must be a number." id="hdnChoiceID6" name="ChoiceID" type="hidden" value="13" />
            <button type="button" id="btnQ6C12" class="choice-btn btn btn-info " data-choice-id="12" data-question-id="6" data-model-field=#hdnChoiceID6>Yes</button>
            <button type="button" id="btnQ6C13" class="choice-btn btn btn-info active" data-choice-id="13" data-question-id="6" data-model-field=#hdnChoiceID6>No</button>
    </div>
</form>
            </div>
        </div>
    </div>
</div>
<div class="accordion" id="accordionQuestion7">
    <div class="card">
        <div class="card-header" id="headingQuestion7">
            <h5 class="mb-0">
                <button class="btn btn-link" data-toggle="collapse" data-target="#clpQuestion7" aria-expanded="true" aria-controls="clpQuestion7">
                    2. Four
                </button>
            </h5>
        </div>

        <div id="clpQuestion7" class="collapse" aria-labelledby="headingQuestion7" data-parent="#accordionQuestion7">
            <div class="card-body">
               <form action="/Questionnaire/SubmitAnswer" class="questionForm" data-ajax="true" data-ajax-method="POST" data-ajax-success="ProcessAjaxFormResponse" id="frmQuestion7" 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" type="hidden" value="7" /><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" type="hidden" value="1" />    <div>
        <input data-val="true" data-val-number="The field ChoiceID must be a number." id="hdnChoiceID7" name="ChoiceID" type="hidden" value="14" />
            <button type="button" id="btnQ7C14" class="choice-btn btn btn-info active" data-choice-id="14" data-question-id="7" data-model-field=#hdnChoiceID7>Yes</button>
            <button type="button" id="btnQ7C15" class="choice-btn btn btn-info " data-choice-id="15" data-question-id="7" data-model-field=#hdnChoiceID7>No</button>
    </div>
</form>
            </div>
        </div>
    </div>
</div>
            </div>
        </div>
    </div>
</div>

<!-- .section-holder --></div>

<script>
(function(d) {
   'use strict';
   var sh = d.getElementsByClassName( 'section-holder' );
    for( var i = 0; i < sh.length; i ++  ) {
     var ch = sh[ i ].getElementsByClassName( 'card-header' );
      for( var c = 0; c < ch.length; c ++  ) {
       ch[ c ].classList.add( 'header' + c );
      }
     }
}(document));
</script>

</body>
</html>

Bear in mind that the code you supplied has coding
errors whicht I have not attempted to rectify. :wonky:

coothead


#17

Got it thank you coothead, you have been amazing cheers


#18

 
 
        No problem, you're very welcome. :winky:
 
 
        coothead