Hello! There is a spoiler code on pure css

.sub-menu { display: none; } .main-item:focus ~ .sub-menu, .main-item:active ~ .sub-menu, .sub-menu:hover { display: block; } <a class="main-item" href="javascript:void(0);" tabindex="1" >Читайте больше...</a> <div class="sub-menu"> Текст </div>

which has a huge drawback - it is closed not by clicking on the link, but by clicking on any area outside the text. I know that there are many ways to implement the same in Java. But still, it really attracts the simplicity of this implementation, is it possible to refine this code so that it can be buried by clicking on the link and not closed by clicking on it outside the text? I would be very grateful for the help.

  • java! = javascript if the browser supports: checked then you can implement it through the checkbox. - zb '
  • Yes, you are right, I meant javascript, of course, Java is completely different :) - Aviko

1 answer 1

http://jsfiddle.net/oceog/82V8t/

HTML:

 // label может содержать в себе один input, при клик на label в этом случае равен клику на label <label class="main-item">Читайте больше... <input class="readmore" type="checkbox" /> <div class="sub-menu">Текст</div> </label>

CSS:

 .sub-menu { display: none; } /* взять в под-элементах .main-item следующий элемент с классом sub-menu после элемента input с классом readmore, на котором стоит галочка */ .main-item input.readmore:checked + .sub-menu { /*показать его*/ display: block; } .readmore { /*скрыть чекбоксы*/ display: none; }

Styles to make it look like <a> .

Here's another option - so that just by clicking on the label is closed, but then you have to attach a unique id to each input.

another option with its minuses

  • Thank! Be kind, explain what's what. Honestly, I’m a bit bored using ready-made solutions, not understanding how it works :) ps something doesn’t work on the 9th explorer - Aviko
  • I do not have the 9th Exlorer, but according to the description it should work just from the 9th - zb '26
  • And you can also shift the responsibility for mapping to the parent for the content and switch common, like this: jsfiddle.net/zsaF5/1 . Now the spoiler will close only when you click outside it, but the text inside it can be poked as much as you like. Only if there is no other element inside that can receive focus. - Bars
  • @Bars how does this solve the problem described by Aviko? - zb '
  • @eicto If you open a spoiler, and then you want, for example, to highlight something inside a block that has just been hidden, the spoiler will not collapse. And it will only collapse when clicking outside the spoiler container. Your options, of course, are better, but some are less unpretentious to browsers, some are more difficult in a marking. My option is only suitable for cases in which the spoiler hides [spoiler] [1] [1]: lurkmore.to/%D0%A1% D0% BF% D0% BE% D0% B9% D0% BB% D0% B5% D1% 80 - Bars