Question: Toggle Class

I’ve looked over the other similar topics and I just can’t figure out what I’m missing.

Thanks for any assistance…

Here’s the quiz:

The code:

The result:

What’s the issue here, JR?

The issue is the toggle is not activating when the daysUntil are between 0 and 14 days. I would like the row to toggle to danger when the criteria is true.

dmx-class:danger=“varAlert.datetime.daysUntil(date) >= 0 && varAlert.datetime.daysUntil(date) >= 14”

Well, from what i see on your screenshot the danger class is properly applied to the <tr> - isn’t that what needs to be done?

Yes sir. The ‘danger’ is also showing in the class as seen in the second screenshot. I just can’t see what would be preventing the class to display.

What do you mean by:

To display where? I see it’s “displayed” in the class attribute on your page.

Well the same trigger: varAlert.datetime.daysUntil(date) >= 0 && varAlert.datetime.daysUntil(date) >= 14 works perfectly on all the ‘show/hide’ items. Such as changing the text color from green to red.

I would like the row to toggle to danger when the date is within the parameters of 14 days or less from the target date variable (varAlert).

JR, your class is properly being applied to the row, this can be clearly seen on your screenshot.
Is the issue you are having, that you expect a certain style to be applyed to the row?
If that is your question - have you defined this “danger” class in the CSS anywhere?

I would like the row’s background to turn to danger along with the text staying text-danger. I hope this makes sense.

As for the CSS, no, there is no other definitions listed.

Ah, you want to use the bootstrap 4 specific class for that??

But you are using a wrong class then! It should be table-danger, like:

<tr class="table-danger">...</tr>

Haha! Well, my vocabulary was obviously lacking. Yes… I’ll try that.

Hi JR, have you seen this tutorial? Might help if you haven’t.

I must have viewed an older video tutorial from the DMX library. Within it I believe it used simply dmx-class:danger.

I will update the code and I’m certain, based on Teo’s directions, it will work!

Classes change across different bootstrap versions :slight_smile:

1 Like

Thanks Brad!

1 Like