Question

I’m working on a small jQuery element and I’m pretty much done with the help of Stackoverflow and google but there’s a small problem that I can’t seem to figure out. Tried to solve it with CSS but that didn’t go anywwhere.

I have jsFiddle for the project: http://jsfiddle.net/PcWjA/2/

Everything works fine, the add/subtract buttons work and the active class runs through the spans. But what I’m still missing is that when you’re on the number 7 and then press the + button so it goes to 8 I want it to display the ul item. And when you go down to 7 the ul item goes hidden again.

Like I said I tried a few CSS solutions, add class/remove class etc but that doesn’t seem to work. So I was thinking, is it possible to make the hidden ul shown when the class “spanval_active” is in the span class “more”.

Answer 1

Take a look, if this what you want: http://jsfiddle.net/PcWjA/3/

So to explain:
You already are getting at what element is currently active (stored at hour variable), so we need to check if currently active element is higher than 7 or lower-equal. If it is higher then we need to show the list, we do that by calling jQuery method .show() on the list, if it is lower we hide the list with .hide()

    if (hour > 7) {
        $('.more .hour_dropdown').show();
    } else {
        $('.more .hour_dropdown').hide();
    }