I'm trying to add a function to my Wordpress website that changes the color of a title based on the day of the week to highlight that day's daily food special.
The website was built using WPBakery Builder and was hoping to add some Javascript to get this done. thebanquetbar.com/daily-specials
I have seven accordion sections each with the class 'daily-special-item'
At the bottom of the page I have a Raw JS row with the following code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
$('.daily-special-item').eq(new Date().getDay()).addClass('daily-today');
</script>
This was based on the answer found here: Adding a class based on current day of the week
I'm thinking that since my accordions aren't in the same div this is causing the problem?
Is there a way to use Javascript and target each accordion based on the day of the week and change the color of the title?
CSS:
.daily-today{
background: #fff;
color: #000;
}
This should do it:
<!-- Here's the jQuery script. Don't touch it. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Here's your custom script that does the highlight -->
<script>
var dayOfWeek = (new Date).getDay();
var targetElement = $("h3.edgtf-accordion-title.ui-accordion-header")[dayOfWeek];
$(targetElement).addClass("daily-today"); //or apply CSS directly as shown below
</script>
I notice that the class is not yet defined in your CSS on the live page, so I was able to get the same effect there by applying the CSS attributes directly to the element like this:
$(targetElement).css({"background-color": "#fff", "color":"#000"});