Joomla itself has the option to work with tabs in your content. This tutorial will explain how this works.

First: yes it is native Joomla, you do not need an external plugin for this to work. Go to extension/plugins, and find the plugin content-page break

Here you can set up the option you want to use:

Screenshot 2018-12-09 13.49.27.jpg

Make sure the plugin is enabled. Once this is the case, you can simply go into your article and use the Page Break button below the editor.

Each page break you insert is a tab or a slider. Below the insert, type your text, and you are set.

Screenshot 2018-12-09 13.51.59.jpg

If it does not work, it actually does, but then you miss some CSS to make it happen. For the tabs to work, add this to your custom css, and style it to your needs:

dl.tabs {
float: left;
margin-bottom: -1px;
}

dl.tabs dt.tabs {
float: left;
margin-left: 3px;
padding: 4px 10px;
background-color: #F0F0F0;
border-top: 1px solid #CCC;
border-left: 1px solid #CCC;
border-right: 1px solid #CCC;
}

dl.tabs dt:hover {
background-color: #F9F9F9;
}

dl.tabs dt.open {
background-color: #FFF;
border-bottom: 1px solid #FFF;
}

dl.tabs dt.tabs h3 {
margin: 0;
font-size: 1.1em;
font-weight: normal;
}

dl.tabs dt.tabs h3 a {
color: #000;
}

dl.tabs dt.tabs h3 a:hover {
color: #000;
text-decoration: none;
}

dl.tabs dt.open h3 a {
color: #000;
text-decoration: none;
}

div.current dd.tabs {

    margin: 0;

    padding: 10px;

    clear: both;

    border: 1px solid #CCC;

    background-color: #FFF;

}

label {

display: inline-block !important;

}

 

 


Share this page