Nice! but there an option to add a function to remove the last option chosen like a combo select?
Carlos, no there is not — at least not without another anchor link. When the URL no longer has an anchor referenced (via #foo), then nothing will be the target and the CSS selector won’t apply. This is really just a very basic example to show the capability.
and it is possible to join this example with yours?
Thanks for your help Adrian
Sort of. Those are
selectmenus, so they aren’t related to my example at all. You could use the select menu to load the page at a specific anchor, but then you are using a form for navigation and that’s generally frowned upon. You could also re-style my example to look like those menus, but that’s also suggesting to users that functionally they will behave like the form element (such as support for arrow keys).
This is pretty nifty and simple. Targeting an ID scrolls the page to that element, is there anyway to avoid the scroll? I have a lengthy Q&A where you answer each question with yes or no (some nested questions too), and once clicked your answer shows, then you manually scroll to the next question.
I would like to avoid the page scrolling to the answer (your choice) when it is chosen. Any thoughts on this? I see another solution using input checkboxes that I might try too, but it’s not as elegantly simple as this.
I cannot think of an option off the top of my head that does not involve some scripting. However, since I consider the scrolling effect to be a feature and one which I would not want to disable, then this may not be best option for you.
You may want to just use a
<button>element with a simple function that toggles a
class. Then use an adjacent sibling selector for any buttons with that class and display the content.
FWIW, I am still not a fan of hiding content until a user interacts with it when it is already on the page, but I do not know your application.