Hi again…hopefully a simple one for those in the know. I’ve had a google and play around with this, but feel I’m wasting time…
I have 4 top panels that have an open button and share the class name (.step-arrow-c)
Each panel has a hidden bottom panel and share the class name (.bottom) with unique ids
The .step-arrow-c class fires a JQ .Toggle (“blind”) . As there’s 4 different panels, I’m trying to make it fire the blind in the relevant panel… Played with (this) - but I think closest() may do it…not sure… any advice plzzzz?
Will try rephrase. I have 4 panels each with a button and a content panel. The buttons have class .step-arrow-c. Now I need to find which content panel to open, so I was looking for the nearest (thinking nearest to the button clicked). But yes, the closest() goes up the tree, so this wont do it.
Maybe I’ll just need to write functions for each id and not on class click
hmm ye that could do it - thanks again. Suppose if I need to put more divs inbetween I could add spans with display block and that won’t affect the next() function right?
The ‘data-’ attribute allows you to embed custom data attributes. The ‘target’ portion is just a name I made up so that it can be referenced. It could be anything:
e.g. ‘data-myElementThatIneedtoFind="#some-id’
The value can be any snippet of data that you might find useful and therefore can be accessed with js. It’s like a little storage place for data. The link above explains it better than I can
As an aside note in your example you were using spans and I changed my example to a div as that is more semantic as you should not run inline elements immediately into block elements (although its valid).
Also ‘label’ elements are to associate form controls and shouldn’t be used for any other function - unless of course you were using some form controls in your real example.
It’s all about semantics
Notice how I added an arrow after the text (using :after) rather than using an element in the html. The arrow is then toggled up and down with the class I added and cuts down on code. Simpler is better in most cases.
Got the data attribute…if I run into any problems, I’ll be sure to check the link out…
Semantics noted…
To make the html easier to read, i’d often break up the divs with span elements that have display block… wrong I know, but works.
And same reason for the incorrect use of the label tag. I know a label is used to direct person to the input element…and thought it wont hurt using them as labels as it makes the html easier to read (and prettier with the yellow!!!)
Never used the css :after - something I need to look into… before I set a class toggle with css rotate transitions…imagine :after will create the same effect with no js…so happy days
But yet again, thanks for feedback Paul. Your help here has been top-notch