Do you know what HTML spoiler is? Website development is in demand among many. Some learn the development of Internet resources on their own, take information from a variety of sources. There are concepts that they have to face for the first time. What is a spoiler and how to make it on a site without any help? In this article you will learn about this.
What is a spoiler?Consider an HTML spoiler that runs on any content management system (CMS). A spoiler is a construction that contains part of the site’s content, which is first hidden to the user. A person clicks on the corresponding link and sees all the content. For this purpose, an HTML spoiler is also used. Still can't understand why hide a piece of the article? More often for external decoration of the resource. In addition, HTML spoilers are made for 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, voluminous content is needed. And then the spoiler helps out.
Search engines see hidden text; this does not interfere with the ranking of a resource’s ranking. Often spoilers are used to hide supporting information that is not interesting to everyone. There are ready-made spoiler plugins, but you can develop your own code with a certain style that matches the design of a particular site.
Spoiler example
Let's figure out how to make the spoiler HTML code. The code that 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 case when it will be necessary to apply it only on one specific page, you can put the code between the body tags.
The spoiler title and its body look like this:
The main thing has been done, but so far our spoiler will not work fully. The fact is that the content of our HTML spoiler is always open. To fix this, CSS is required. 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, loading all the necessary libraries. Download them from developers from official sites, then enable everything in the Plugin Manager. In order to put a spoiler that hides the text, enclose the necessary fragment of the article in the spoiler tag ([spoiler]). In the settings, you can select its type. It can be a button or a simple link. The conditions for its disclosure are also set: by click or at the moment when the user hovers over the cursor.
There are three options 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 sets the appearance of the spoiler (link is the link, and button is the button).
Inside the spoiler tag, you can use text with HTML tags.
Spoiler is a convenient tool, it is widely used on various blogs and forums. Agree, it's nice to hide those parts of the page that overload it. Improve the appearance of your site, as many users like it.