Need some jquery help also with localstorage =) thank you 🙂

JavaScript
1

Demo url: https://pastebin.com/GPwFdfBc

Functionality

Which is a standard vbulletin feature. However what I want to add on top or as a standalone jquery solution is to add a class to the .forumhead which is the orange bar you see, the class would be either open or closed based on the “click” event on the :

<a class="collapse" id="collapse_c_cat33" href="#top"><img src="pathbuttons/collapse_40b.png" alt=""></a>

and then with css I would style the heading to be a sligtly diff tone.

Now the to do is:

= travel up the dom tree to the .forumhead, and add the class to the closest one found to the a.collapse that is clicked and remember the open and close state with the localstorage per heading and a element.

My code: (I tried for hours but I do know you can’t do .click inside .click event…

// collapse
// try https://www.sitepoint.com/community/t/div-class-is-active-after-page-refresh/40720/6 
$(".forumhead").click(function () {
    
   $("a.collapse").click(function () {
   $(this).addClass("closed");
  $(".forumhead").parent().first().addClass("closed");
   })
   
});

Could anyone help me out here?

We gotta also add a close or open class if that make sense to the a element.

2

Putting clicks inside clicks is only asking for trouble. You CAN do it. It’s legal. But it’ll cause rather odd behaviour once you start clicking on it multiple times.

So first question is… what do you want this to be triggered on? Clicking ANYWHERE on the forum header, or only on the little arrow button? (Hint, given that there are other links in the header, we’re gonna choose the latter option. So drop the forumhead.click, and stick with the a.collapse click)

Second question is… where is the forumhead, relative to the event? The event will originate at the <a> tag. (Note: We dont need to apply a class to this tag, if we’re going to apply one to its parent, because CSS works that way.)
You hit upon a keyword in your post without realizing it: [quote=“bustapaladin, post:1, topic:301072”]
add the class to the closest one found to the a.collapse that is clicked
[/quote]
jQuery has a function for that. .closest()
So. See if you can make a click function for a.collapse that finds the closest .forumhead. Once there, you might take a look at .toggleClass() instead of addClass to apply it to the <ol> tag next to it , so that the button can be clicked multiple times and have it flop back and forth.

As far as localstorage, Once you’ve found the closest header, there’s an id attribute in its parent that can be used as a key for storing information. Or removing it, if that’s what you’re trying to do. (Hint: if the header is now classed as closed, we’re adding something. Otherwise, we’re removing it.)

The second phase will be on pageload: namely, for each key in our localStorage, find the a.collapse underneath that key’s header, and trigger a click event on that link.

2 Likes
3

I tried everything but I’m really stuck. I can’t tackle this without help code. So yes tried closest, parent, .first, etc , in combinations too

https://gyazo.com/aff156c4b8d1eec0ef865d5e537ebbe7 here’s the structure with both closed classes added.

I assume its not required to add open classes? Right? That’s reduentent code I think. If it goes open we just clear the localstorage.

Can you help me with a working code that also keeps it stored on reload?

ps the id you talk about is one level up and not the .forumhead for which our code is but if we can still write something and use the parent id for localstorage then sure! I however have no clue how to go about doing this. Rarely used localstorage.

4

It’s redundant to put a closed tag on the <a>, because ".closed a.collapse" is a valid css identifier.
Open classes are also redundant because open is the natural state.

Everything you need to code this is in the above post. I will pseudocode it for you, since you seem to be struggling, but try it yourself from this.

When the Document is Ready:
  Bind the following function:
    When someone clicks on the link:
      Find the closest forumhead. Store that element.
      Toggle the closed class on that element.
      Find the ID attribute of that element's parent, and store it.
      Find the ol element [next] to the forumhead.
      If the forumhead element has the class 'closed'
          Add the ID to localstorage.
      Otherwise
          Remove the ID from localstorage.
    EndFunction1.
  Now read localStorage. For each key in localstorage:
   Find the a.collapse element that is underneath the li with that ID.
   trigger a click event on that element.
  End Loop
EndDocumentReady
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.