All geek questions in one place

Click the title and expand the text without using JavaScript / jQuery.

As the title says, my question is very simple: is there a way that I can click on the heading (heading) and expand (and collapse) the associated text without using JavaScript or jQuery? Is there a browser compatible method (IE 6+)?

I made a very simple HTML + CSS site for the conference, and I would like to use JS only if necessary. So, I'm just asking if I can do this by sticking only to HMTL / CSS, of course, in a compatible way.

A few solutions that I found are old or incompatible with some versions of the browser.

Thanks a lot João

+6
source share
2 answers

IE6- protected pure CSS solution?

NOT

[Leave dead peace in your graves, do not try to force them to run a marathon. This is what you do when you ask IE6 to do such things.]

IE7 / 8?

Yes, there is one solution (the principle is the same as used in this old demo of mine ), but it is not permanent (this means that if you click somewhere else on the page, your advanced content will crash), and in IE7 it’s a little strange (this means that you have to click on the button after clicking on it to see how your content expands).

IE9 + and other browsers ?

YES! Also permanent. The same principle as here .

JavaScript / jQuery method?

Yes! Take a look: the jQuery version of the same demo .

+9
source

You can create simple Hover drop-down menus using only HTML and CSS, which are supported by a cross browser:

http://jsfiddle.net/fkS2z/

You can improve this with fades or slidingowns with CSS transitions that are not supported in a lower version of IE:

http://jsfiddle.net/N9fDy/1/

Not so many clicks.

+3
source

Source: https://habr.com/ru/post/925584/

More articles:


All Articles