last day (19 days later) » 

8:14 PM
-1
Q: Targeting data-state to toggle nav headers

user3438917I need to be able to toggle the "HEADER"'s so that when the subnav is closed for any of them, the header icon is always set to a + sign, and has a data-state=hide I found that the state of the headers is always set to active, and that the only way to toggle the + or - sign is to toggle the data-...

 
You could use $elem.attr("data-state") to get the value and .attr("data-state", newValue) to set the new one.
 
@JakubRożek - could you provide an example?
 
$("button.list-header").attr("data-state") and $("button.list-header")..attr("data-state", "show"); it this clear?
 
I'm trying to set it so that when the user clicks another list-header, the previously opened one should toggle back to it's original state. I tried this: if($(".col-wrapper").css("display") == "none")){ $(".list-header").attr("data-state", "hide"); }, but is giving me the error "unexpected token" So if col-wrapper is display:none, the list-header should have a data-state = hide
 
if ($(this).find(".col-wrapper").css("display") == "none") { $(this).attr("data-state", "hide"); } should fix your error.
 
8:14 PM
Hmm, this still isn't hitting the previously opened list header using: $(".list-header").on('click', function(){ if ($(this).find(".col-wrapper").css("display") == "none") { $(this).attr("data-state", "hide"); } });
@JakubRożek - I've added a screenshot of the issue and some more detail. Hopefully this helps clarify what's happening.
 
Could you update the fiddle with the new code?
 
I'm blocked from using the chat site at work, but can do it on my phone. May take a little longer.
 
Just post the code at your leisure, I will take a deeper look a bit later when I wake up (in 9-10hours)
 
I've updated the fiddle: jsfiddle.net/2bu35uLn/4/
Thanks!
 

  last day (19 days later) »