Menu icon Foundation
TABS - Different content - Different places

I want to display different content in different places when I click in one tab.

I am using "bi-dimensional" tabs already on the right (see printscreen), and when I click one if the items (again on the right) the first colum (now on the left) displays correctly, but the column immediately below keeps adding the tabs content instead of showing only one at a time like the normal behaviour of the tabs.

 

CODE ON THE RIGHT:

 

<div class="row collapse">
    <div class="small-12 columns">
        <ul class="tabs" data-tabs id="exchange-tabs">
            <li class="tabs-title is-active"><a href="#btc" aria-selected="true">BTC</a></li>
            <li class="tabs-title"><a href="#xmr" aria-selected="true">XMR</a></li>
        </ul>
    </div>
    <div class="small-12 columns">
        <div class="tabs-content" data-tabs-content="exchange-tabs">
            <div class="tabs-panel is-active" id="btc">
                <ul class="tabs vertical" data-tabs id="exchange-tabs-content-btc">
                    <li>
                        <div class="row coins-header">
                            <div class="columns">Coin</div>
                            <div class="columns">Price</div>
                            <div class="columns">Volume</div>
                            <div class="columns">Change</div>
                            <div class="columns">Name</div>
                        </div>
                    </li>
                    <li>
                        <div class="input-group search-box">
                            <input id="filter-coins" placeholder="Filter" class="input-group-field" type="text">
                        </div>
                    </li>
                    {{#each coins-btc.coin}}
                    <li class="tabs-title">
                        <a href="#btc-{{initials}}" aria-selected="true">
                            <div class="row">
                                <div class="columns">{{initials}}</div>
                                <div class="columns">{{price}}</div>
                                <div class="columns">{{volume}}</div>
                                <div class="columns">{{change}}</div>
                                <div class="columns">{{name}}</div>
                            </div>
                        </a>
                    </li>
                    {{/each}}
                </ul>
            </div>

            <!-- XMR -->
            <div class="tabs-panel" id="xmr">
                <ul class="tabs vertical" data-tabs id="exchange-tabs-content-xmr">
                    <li>
                        <div class="row coins-header">
                            <div class="columns">Coin</div>
                            <div class="columns">Price</div>
                            <div class="columns">Volume</div>
                            <div class="columns">Change</div>
                            <div class="columns">Name</div>
                        </div>
                    </li>

                    <li class="tabs-title">
                        <a href="#xmr-eth" aria-selected="true">
                            <div class="row">
                                <div class="columns">No XMR pairs defined.</div>
                            </div>
                        </a>
                    </li>

                </ul>
            </div>
        </div><!-- Tabs content ends -->
    </div><!-- Tabs content row ends -->
</div><!-- exchange ends -->

 

FIRST COLUMN ON THE LEFT

<div class="tabs-content" data-tabs-content="exchange-tabs-content-btc">
    <div class="tabs-panel is-active" id="btc-eth">
        <div class="pair-title">
            <h1>ETHEREUM EXCHANGE</h1>
            <h4>ETH/BTC</h4>
        </div>
    </div>
    <div class="tabs-panel" id="btc-xmr">
        <div class="pair-title">
            <h1>MONERO EXCHANGE</h1>
            <h4>XMR/BTC</h4>
        </div>
    </div>
    <div class="tabs-panel" id="btc-1337">
        <div class="pair-title">
            <h1>1337 EXCHANGE</h1>
            <h4>1337/BTC</h4>
        </div>
    </div>
    <div class="tabs-panel" id="btc-2Give">
        <div class="pair-title">
            <h1>2GIVE EXCHANGE</h1>
            <h4>2GIVE/BTC</h4>
        </div>
    </div>
    <div class="tabs-panel" id="btc-bay">
        <div class="pair-title">
            <h1>BAY EXCHANGE</h1>
            <h4>BAY/BTC</h4>
        </div>
    </div>
    <div class="tabs-panel" id="btc-dash">
        <div class="pair-title">
            <h1>DASH EXCHANGE</h1>
            <h4>DASH/BTC</h4>
        </div>
    </div>
    <div class="tabs-panel" id="btc-doge">
        <div class="pair-title">
            <h1>DOGE EXCHANGE</h1>
            <h4>DOGE/BTC</h4>
        </div>
    </div>
</div>

 

COLUMN IMMEDIATELY BELOW (where the TABS content is been added instead of showing one at a time)

 

<div class="tabs-content exchange-tabs-content-btc card-base" data-tabs-content="exchange-tabs-content-btc">
    <div class="tabs-panel is-active" id="btc-eth">
        <!--<img src="assets/img/eth-chart.jpg">-->
        ETH Chart
    </div>
    <div class="tabs-panel" id="btc-xmr">
        XMR Chart
    </div>
    <div class="tabs-panel" id="btc-1337">
        1337 Chart
    </div>
    <div class="tabs-panel" id="btc-2Give">
        2GIVE Chart
    </div>
    <div class="tabs-panel" id="btc-bay">
        Bay Chart
    </div>
    <div class="tabs-panel" id="btc-dash">
        Dash Chart
    </div>
    <div class="tabs-panel" id="btc-doge">
        DOGE Chart
    </div>
</div>

 

tabs

I want to display different content in different places when I click in one tab.

I am using "bi-dimensional" tabs already on the right (see printscreen), and when I click one if the items (again on the right) the first colum (now on the left) displays correctly, but the column immediately below keeps adding the tabs content instead of showing only one at a time like the normal behaviour of the tabs.

 

CODE ON THE RIGHT:

 

<div class="row collapse">
    <div class="small-12 columns">
        <ul class="tabs" data-tabs id="exchange-tabs">
            <li class="tabs-title is-active"><a href="#btc" aria-selected="true">BTC</a></li>
            <li class="tabs-title"><a href="#xmr" aria-selected="true">XMR</a></li>
        </ul>
    </div>
    <div class="small-12 columns">
        <div class="tabs-content" data-tabs-content="exchange-tabs">
            <div class="tabs-panel is-active" id="btc">
                <ul class="tabs vertical" data-tabs id="exchange-tabs-content-btc">
                    <li>
                        <div class="row coins-header">
                            <div class="columns">Coin</div>
                            <div class="columns">Price</div>
                            <div class="columns">Volume</div>
                            <div class="columns">Change</div>
                            <div class="columns">Name</div>
                        </div>
                    </li>
                    <li>
                        <div class="input-group search-box">
                            <input id="filter-coins" placeholder="Filter" class="input-group-field" type="text">
                        </div>
                    </li>
                    {{#each coins-btc.coin}}
                    <li class="tabs-title">
                        <a href="#btc-{{initials}}" aria-selected="true">
                            <div class="row">
                                <div class="columns">{{initials}}</div>
                                <div class="columns">{{price}}</div>
                                <div class="columns">{{volume}}</div>
                                <div class="columns">{{change}}</div>
                                <div class="columns">{{name}}</div>
                            </div>
                        </a>
                    </li>
                    {{/each}}
                </ul>
            </div>

            <!-- XMR -->
            <div class="tabs-panel" id="xmr">
                <ul class="tabs vertical" data-tabs id="exchange-tabs-content-xmr">
                    <li>
                        <div class="row coins-header">
                            <div class="columns">Coin</div>
                            <div class="columns">Price</div>
                            <div class="columns">Volume</div>
                            <div class="columns">Change</div>
                            <div class="columns">Name</div>
                        </div>
                    </li>

                    <li class="tabs-title">
                        <a href="#xmr-eth" aria-selected="true">
                            <div class="row">
                                <div class="columns">No XMR pairs defined.</div>
                            </div>
                        </a>
                    </li>

                </ul>
            </div>
        </div><!-- Tabs content ends -->
    </div><!-- Tabs content row ends -->
</div><!-- exchange ends -->

 

FIRST COLUMN ON THE LEFT

<div class="tabs-content" data-tabs-content="exchange-tabs-content-btc">
    <div class="tabs-panel is-active" id="btc-eth">
        <div class="pair-title">
            <h1>ETHEREUM EXCHANGE</h1>
            <h4>ETH/BTC</h4>
        </div>
    </div>
    <div class="tabs-panel" id="btc-xmr">
        <div class="pair-title">
            <h1>MONERO EXCHANGE</h1>
            <h4>XMR/BTC</h4>
        </div>
    </div>
    <div class="tabs-panel" id="btc-1337">
        <div class="pair-title">
            <h1>1337 EXCHANGE</h1>
            <h4>1337/BTC</h4>
        </div>
    </div>
    <div class="tabs-panel" id="btc-2Give">
        <div class="pair-title">
            <h1>2GIVE EXCHANGE</h1>
            <h4>2GIVE/BTC</h4>
        </div>
    </div>
    <div class="tabs-panel" id="btc-bay">
        <div class="pair-title">
            <h1>BAY EXCHANGE</h1>
            <h4>BAY/BTC</h4>
        </div>
    </div>
    <div class="tabs-panel" id="btc-dash">
        <div class="pair-title">
            <h1>DASH EXCHANGE</h1>
            <h4>DASH/BTC</h4>
        </div>
    </div>
    <div class="tabs-panel" id="btc-doge">
        <div class="pair-title">
            <h1>DOGE EXCHANGE</h1>
            <h4>DOGE/BTC</h4>
        </div>
    </div>
</div>

 

COLUMN IMMEDIATELY BELOW (where the TABS content is been added instead of showing one at a time)

 

<div class="tabs-content exchange-tabs-content-btc card-base" data-tabs-content="exchange-tabs-content-btc">
    <div class="tabs-panel is-active" id="btc-eth">
        <!--<img src="assets/img/eth-chart.jpg">-->
        ETH Chart
    </div>
    <div class="tabs-panel" id="btc-xmr">
        XMR Chart
    </div>
    <div class="tabs-panel" id="btc-1337">
        1337 Chart
    </div>
    <div class="tabs-panel" id="btc-2Give">
        2GIVE Chart
    </div>
    <div class="tabs-panel" id="btc-bay">
        Bay Chart
    </div>
    <div class="tabs-panel" id="btc-dash">
        Dash Chart
    </div>
    <div class="tabs-panel" id="btc-doge">
        DOGE Chart
    </div>
</div>

 

Nuno over 1 year ago

in the image only "Bay chart" should show because "BAY" is selected on the right, but all other charts text is showing because I previously clicked in different coins on the right.

gaurav kumar 4 months ago

i wanna implement this on this page Angry Birds Mod Apk . How can i do?

 

AddisonCaleb 4 months ago

You can implement this directly using APK Editor 2018. This will help you to reopen the edited codes for you application.