![]() ![]() (in case the selected sizing is off-screen, perhaps * this selects the spans with the data-units attributeĪnd creates some generated content to show the sizing * as above, but we use the id of 'eu' to ultimatelyįind the spans with the data-attribute of 'EU': */ 'US' and display them as 'inline-block': */ Span elements with a data-unit attribute-value of (using the general-sibling combinator ('~')Īnd from those paragraphs we find the descendant We traverse to the later paragraph siblings * if the element with the id of 'us' is checked * hiding all span elements with a 'data-units' Not visible to the user choose any suitably large ![]() * visually moving the inputs of 'type=radio' (usingĪ CSS attribute-selector) off the page, so it's Sibling combinator ('+') traverses from theĬhecked input to the adjacent label element: */ The selected/'checked' input, and the adjacent * the :checked pseudo-class allows us to select * irrelevant, and merely for aesthetics: */ These radio-inputs precede the element(s) within which the sizing information is held that you want to toggle, and CSS is used to select the checked radio-input and then show only the specific content, hiding the other. The element is linked to an element of type="radio", and the relevant radio-inputs share the same name, so that only one can be selected at a time. Now, your question was how to use a button to show/hide the sizing information, to show either the US sizing, or the EU sizing to do that is easier with JavaScript, but there is a (slightly messy) hack available to allow native HTML and CSS to implement that behaviour using and elements. That said, this is the resulting HTML (of that part), note that I also moved the sentence-closing period within the paragraph, for syntactic correctness: This is the start of the article and this shoe is only available in
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |