AppGini Community Forums

Posted: **2021-07-09 10:23**

I have a questionnaire that users need to complete. Each question is placed in the Appgini App Description Area (.help-block).
My problem is that the questionnaire is broken up into 3 sections. Each section header, containing info about the section, is also shown as a read-only description field.

The client has requested that each section HEADER is a color other than the default alert-info blue (the questions themselves stay as is). I can change ALL of the descriptions/help blocks easily easily enough by adding a new class to span.help-block like so:

<script>
$j(document).ready(function() {
$j("span.help-block").addClass("in").find(".alert-info").removeClass("alert alert-info").addClass("alert alert-warning");
});
</script>

But what I can't do, despite my best efforts, is change a single help block to, say, alert.alert-warning without changing all the others. Can someone please help me with this?

Thx so much.

Posted: **2021-07-09 11:05**

* please put code in [ code ] ... [ /code ] tags for better readability.

Could work for the first help-block like this.

Code: Select all

<script>
$j(document).ready(function() {
  $j("span.help-block").addClass("in");
  
  // selector :eq(n) is your friend
  // n is the zero-based index
  $j(".help-block.alert-info:eq(0)").removeClass("alert-info").addClass("alert-warning");
  
});
</script>

Change n for the other help blocks.

Posted: **2021-07-09 12:40**

Jan, you are an absolute legend, as always.

Thank you very much for this. Works perfectly.

AppGini Community Forums

Styling bootstrap help-block description color

Styling bootstrap help-block description color

Re: Styling bootstrap help-block description color

Re: Styling bootstrap help-block description color