Why do I need an HTML spoiler?

Do you know what an HTML spoiler is? The creation of sites is in demand with many. Some learn the development of Internet resources themselves, they take information from a variety of sources. There are concepts with which they have to face for the first time. What is a spoiler and how to do it on the site without someone's help? In this article you will learn about this.

What is a spoiler?

Consider an HTML spoiler working on any site management system (CMS). A spoiler is a design that contains some of the site content that is hidden from the user first. A person clicks on the corresponding link and sees all the content. For this purpose, an HTML spoiler is also used. Still can not understand why hide some piece of article? More common for external resource decoration. In addition, the HTML spoiler is done with some practical purpose. For example, a site was created whose design does not provide for the location of a large article on the main page. And if the owner wants the resource to be promoted by search engines, it needs volume content. That's when the spoiler helps out.

The search engines see the hidden text, this does not interfere with the ranking of the resource's ranking. Often, spoilers are used to hide auxiliary information that is not of interest to everyone. There are ready plug-ins of spoilers, and you can develop your code with a certain style, appropriate to the design of a particular site.

Example of a spoiler

Let's figure out how to make the HTML code of the spoiler. The code you see below should be placed between the head tags of your HTML file, if you want to use your spoiler on several pages of the Internet resource. In the event that you need to apply it only on one specific page, you can put the code between the body tags.

The spoiler's headline and body look like this:

The main thing is done, but so far our spoiler will not work fully. The fact is that the content of our HTML spoiler remains always open. To fix this, you'll need CSS. Add:

If you do everything, as described here, get a workable design.

Spoiler for Joomla

To make it, for example, in Joomla, you can use a plugin called Core Design Spoiler. Do not forget about Core Design Scriptegrator, which loads all the necessary libraries. Download them from the developers from the official sites, then turn everything on in the Plug-in Manager. In order to put a spoiler hiding the text, enclose the necessary fragment of the article in the spoiler tag ([spoiler]). In the settings, you can select its appearance. It can be a button or a simple link. Also, the conditions for its disclosure are set: by clicking or at the moment when the user hovers the cursor.

There are three parameters available in this tag:

• Title allows you to specify your title in quotation marks.
• Action allows you to select the action that opens the spoiler.
• Element specifies the type of spoiler (link - link, and button - button).

Inside the spoiler tag, you can use text with HTML tags.

Spoiler - a convenient tool, it is widely used on different blogs, forums. Agree, it's a good idea to hide those parts of the page that overload it. Improve the appearance of your site, as many people like it.