1

I've been researching some ways to show and hide HTML elements, and I ended up finding this.

My intention is to use a way to show and hide elements without the need to use JavaScript, JQuery, or anything else other than CSS and HTML, so I opted for the use of the attribute "tabindex", and then I created the following simple case of study...

HTML:

<div id="root" tabindex="1">
    <div>DIV A</div>
    <a class="hidden" href="http://www.google.com">LINK</a>
    <div class="hidden">DIV B</div>
    <input class="hidden" type="submit" value="input"/>
</div>

CSS:

.hidden
{
    color: red;
    display: none;
}

#root:FOCUS .hidden
{
    display: block;
}

If you look according to the code, the inner div can be easily clicked and selected. However, the link and the button unfortunately can not be clicked or selected. In an attempt to do so, the focus of root div is lost.

My question is very simple. Is there one, or different ways that this can be bypassed / solved without the use of JavaScript or JQuery or something? (CSS and HTML only)

If it was not clear, my intentions are to hide elements so that when they are revealed they can be used. I would like to create a menu that contains submenus, and the submenus appear only when their parent menu is clicked (and not when the mouse passes over them).

Ah! And I have to mention ... I also found a solution that uses checkbox. Unfortunately, this is not feasible, because I would not have to click again on the element so that it is hidden. That is, I'd like just click outside of the element make it to hide its internal element, so I opted for the "tabindex".

Thanks in advance for your attention and patience.

Community
  • 1
  • 1
Loa
  • 2,117
  • 3
  • 21
  • 45
  • `pointer-events: none` will work in your case but you will not be able to click the inner elements. [Fiddle](http://jsfiddle.net/vfsLung8/) – Mr_Green Nov 25 '14 at 04:30

2 Answers2

1

You should add the FOCUS to the hidden class as well so the focus is not lost when selecting those.

#root:FOCUS .hidden,
.hidden:FOCUS
{
    display: block;
}
Jason W
  • 13,026
  • 3
  • 31
  • 62
  • Hello, Jason W, thanks for the reply! I tried to do what you said, and unfortunately it did not work. Would you have any other ideas? Any one will be very welcome. Thanks again. – Loa Nov 25 '14 at 04:16
  • I see that the answer fixes the link, but the button only works after you click it a second time because the other elements return to hidden as they lose focus from the button click. I'll see what I can do. – Jason W Nov 25 '14 at 04:24
  • I can't see a way without javascript to make it respond to a click and still have the button work when it's not the first element. You can change the css to `#root:hover .hidden` so that you hover over the entire #root container, and because the container size extends, focus is not lost, and all the features within the container work as intended. However, that may not meet your business requirements since you are tied to hover and not focus in order to simulate the onclick style event. – Jason W Nov 25 '14 at 04:31
  • I think you and Mr_Green are right. There may be no way to do this without the use of JavaScript. I appreciate your attention and patience. – Loa Nov 26 '14 at 02:18
1

The problem in your code is that whenever you are clicking a hidden class child element, the parent element is losing focus. Thus the css style is applying to default which is to hide the child elements with hidden class.

I think this can be solved using javascript.

function focusRoot(e) {
    e.currentTarget.parentElement.focus();
    return;
}
var root = document.getElementById('root');
var cs = root.children;
for (var i = 0; i < cs.length; i++) {
    var c = cs[i];
    c.onfocus = focusRoot;
}

Working fiddle

Mr_Green
  • 40,727
  • 45
  • 159
  • 271
  • Hello Mr_Green. Thank you for answering! As I said earlier in my question, it is not feasible to use a checkbox as the user would have to click again on the menu (DIV A) (and not outside it) in order to hide its contents. In addition, I also said that I can not use JavaScript (and your example does not seem to work). I appreciate your help, and if you think of something else, I'll be grateful. Thanks. – Loa Nov 25 '14 at 05:29
  • @Loa it is possible using javascript only. if you changed your mind to include javascript, let me know what exactly is not working in the above code. – Mr_Green Nov 25 '14 at 07:19
  • I think you and Jason W are right. There may be no way to do this without the use of JavaScript. I appreciate your attention and patience. – Loa Nov 26 '14 at 02:19
  • @Loa There is a way as I mentioned in the [above comments](http://stackoverflow.com/questions/27118491/show-and-hide-different-elements-on-focus/27118896?noredirect=1#comment42739378_27118491) but that will not let you click the link or button inside that container. – Mr_Green Nov 26 '14 at 04:41