Joomla Templates Club 406,261 posts

[sergepayeur Friend sergepayeurJoin date: December 2014Posts: 3Downloads:15Uploads:0]

#959694

I have seen in the Typography page of JA Mono that it is possible to use tabs in articles.
I don’t see how to insert tabs content in my article. I see that this is base on ul and li, but it seems that it’s more than a simple hmtl tag !

Could you please help me on that ?

I have also seen that the Template is JA Accordion ready but the JA Accordion module is not installed and I understood that we need a special licence to download modules…

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#959696

Hi
Do u have quickstart package installed on your localhost ?
You need to copy the html code and paste in the article editor source code of your site .
Also You have not need to install Accordion module separately since it comes with ACM style .
You can create ACM module and select style Accordion in it .

[sergepayeur Friend sergepayeurJoin date: December 2014Posts: 3Downloads:15Uploads:0]

#959708

Hello, thanks for your reply. Yes, I have installed the quickstart, but for a unknown reason (maybe a mistake in importing data while installing), I don’t have any article in it. So I don’t have anything to copy/paste.

So if you have the html code to copy paste for tabs, it will be great.

For the accordion, thanks, I have found how it works.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#960028

Hi
Here is sample code for tabs from Typo. Page

<div class="col-lg-12">
            <h2 class="sub-title">Tabs</h2>
            <ul class="nav nav-tabs">
                <li class="active"><a data-itemid="165" data-ajax="1" href="#home" data-toggle="tab" aria-expanded="true">Home</a></li>
                <li class=""><a data-itemid="165" data-ajax="1" href="#profile" data-toggle="tab" aria-expanded="false">Profile</a></li>
                <li class="disabled"><a>Disabled</a></li>
                <li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown"> Dropdown </a>
                    <ul class="dropdown-menu">
                        <li><a data-itemid="165" data-ajax="1" href="#dropdown1" data-toggle="tab">Action</a></li>
                        <li><a data-itemid="165" data-ajax="1" href="#dropdown2" data-toggle="tab">Another action</a></li>
                        <li><a data-itemid="165" data-ajax="1" href="#dropdown2" data-toggle="tab">Another action</a></li>
                    </ul>
                </li>
            </ul>
            <div id="myTabContent" class="tab-content">
                <div id="home" class="tab-pane fade active in">
                    <p>In the area of graphical user interfaces (GUI), a <strong>tabbed document interface</strong> (TDI) or a Tab is one that allows multiple documents to be contained within a single window, using tabs as a navigational widget for switching between sets of documents. It is an interface style most commonly associated with web browsers, web applications, text editors, and preference panes.</p>
                    <p>GUI tabs are modeled after traditional card tabs inserted in paper files or card indexes (in keeping with the desktop metaphor).</p>
                </div>
                <div id="profile" class="tab-pane fade">
                    <p>In the area of graphical user interfaces (GUI), a <strong>tabbed document interface</strong> (TDI) or a Tab is one that allows multiple documents to be contained within a single window, using tabs as a navigational widget for switching between sets of documents. It is an interface style most commonly associated with web browsers, web applications, text editors, and preference panes.</p>
                    <p>GUI tabs are modeled after traditional card tabs inserted in paper files or card indexes (in keeping with the desktop metaphor).</p>
                </div>
                <div id="dropdown1" class="tab-pane fade">
                    <p>In the area of graphical user interfaces (GUI), a <strong>tabbed document interface</strong> (TDI) or a Tab is one that allows multiple documents to be contained within a single window, using tabs as a navigational widget for switching between sets of documents. It is an interface style most commonly associated with web browsers, web applications, text editors, and preference panes.</p>
                    <p>GUI tabs are modeled after traditional card tabs inserted in paper files or card indexes (in keeping with the desktop metaphor).</p>
                </div>
                <div id="dropdown2" class="tab-pane fade">
                    <p>In the area of graphical user interfaces (GUI), a <strong>tabbed document interface</strong> (TDI) or a Tab is one that allows multiple documents to be contained within a single window, using tabs as a navigational widget for switching between sets of documents. It is an interface style most commonly associated with web browsers, web applications, text editors, and preference panes.</p>
                    <p>GUI tabs are modeled after traditional card tabs inserted in paper files or card indexes (in keeping with the desktop metaphor).</p>
                </div>
            </div>
        </div>

[sergepayeur Friend sergepayeurJoin date: December 2014Posts: 3Downloads:15Uploads:0]

#960308

Hello,
Thanks, but there is Something that I dont’t get. If I take this code and copy/paste it into an article, it is not working well. I see the tabs and the content but when I click on a tab, it drives me to the home page of my website, not to the tab content !

Is there any link with somethong else, I seen that it references a data-item=165 !! What is it ?

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#960504

Hi
can u post the URL of page so i can take a look on it .

[Author]

Posts