Forum : Tabs multi niveaux

Bonjour,
Je cherche a faire une page avec des tabs imbriquees
C'est a dire j'ai un onglet (tab) dans lequel il y a un autre onglet.
Pour se faire j'utilise le code Html suivant :
"
<body>
<div>

<div class='tabs-page'>

<ul class='nav nav-tabs' role='tablist'>
<li role='presentation' class='active'><a href='#home' aria-controls='home' role='tab' data-toggle='tab'>Home</a></li>
<li role='presentation'><a href='#profile' aria-controls='profile' role='tab' data-toggle='tab'>Profile</a></li>
<li role='presentation'><a href='#messages' aria-controls='messages' role='tab' data-toggle='tab'>Messages</a></li>
<li role='presentation'><a href='#settings' aria-controls='settings' role='tab' data-toggle='tab'>Settings</a></li>
</ul>
</div>

<div class='tabs-page'>
    <!-- Tab panes -->
    <div class='tab-content'>
        <div role='tabpanel' class='tab-pane active' id='home'>
            <div class='container'>
                <div class='row'>
                    <div class='col-sm-12'>
                        <h3 class='text-center'>Secondary Tabs</h3>
                        <h5 class='text-muted text-center'>Just in case you want them</h5>
                    </div>
                </div>

                <div class='row'>
                    <div class='col-sm-12'>

                        <!-- Tabs - Secondary -->
                        <div class='tabs-secondary'>
                            <!-- Nav Tabs -->
                            <ul class='nav nav-tabs' role='tablist'>
                                <li role='presentation' class='active'><a href='#child1' aria-controls='child1' role='tab' data-toggle='tab'>Option 1</a></li>
                                <li role='presentation'><a href='#child2' aria-controls='child2' role='tab' data-toggle='tab'>OPtion 2</a></li>
                            </ul><!-- ./ nav tabs -->   
                        </div><!-- ./ tabs secondary -->    

                    </div>
                </div>
            </div>
        </div>
        <div role='tabpanel' class='tab-pane' id='profile'>...</div>
        <div role='tabpanel' class='tab-pane' id='messages'>...</div>
        <div role='tabpanel' class='tab-pane' id='settings'>...</div>
    </div>      
</div>

</div>
</body>
"
mais dans mon tabs secondary je ne parviens pas a faire en sorte que lorsqu je clik sur option 1 j'ai une page d'information 1, sur OPtion 2 la page information 2 ...
En esperant etre claire

je joins egalement le CSS :
"
// Font Import
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700)

// Color Variables
$background-light: #F3F4F8
$border-light: darken($background-light, 2%)
$default: #BDC4D0
$active: #0075AD

// Font Variable
$font-family: 'Open Sans', Helvetica, Arial, sans-serif

// Set HTML Font Size for REM's useage
\:root
font-size: 16px

// Assign all elements new font
*
font-family: $font-family

body
height: 100vh
background: $background-light

.tabs-page
position: relative

//Bootstrap .nav-tabs direct descendant styles
> .nav-tabs
    position: relative
    min-height: 50px
    margin: 0
    padding-left: 15px
    text-align: left
    cursor: auto
    border: none
    z-index: 1

    li[role='presentation']
        display: inline-block
        height: 50px
        border: none

        &:not(:last-child)
            padding-right: 22px

        //Default styles
        a[role='tab']
            height: 50px
            margin: 0
            padding: 0px
            font:
                size: 0.875rem
                weight: 700
            text:
                transform: none
                align: center
            letter-spacing: 0.25px
            color: $default
            background: none
            border: none
            line-height: 50px
            transition: color 0.3s ease, box-shadow 0.2s ease

            //Hover state
            &:hover
                color: $active

        //Active class assigned via Bootstrap click method
        &.active

            //Active styles
            a
                color: $active
                box-shadow: inset 0 -2px 0 $active
                background: none

                &:hover, &:focus
                    background: none
                    border: none

//Bootstrap .tab-content direct descendant styles
> .tab-content
    position: relative
    min-height: 500px
    margin: 0
    padding: 0
    background: white
    border-top: 1px solid $border-light
    border-bottom: 1px solid $border-light

.tabs-secondary
position: relative
text-align: center

//Bootstrap .nav-tabs direct descendant styles
> .nav-tabs 
    display: inline-block
    margin: 0 auto 15px
    border-bottom: 1px solid $border-light

    li[role='presentation']
        &:not(:last-child)
            margin-right: 20px

        a[role='tab']
            padding: 12px 0
            font:
                size: 0.6875rem
                weight: 700
            text:
                transform: uppercase
            letter-spacing: 0.02rem
            color: $default
            border: none !important
            background: none !important

            &:hover
                color: $active

    li.active
        a[role='tab']
            color: $active
            background: none
            box-shadow: inset 0 -2px 0 0 $active    
         "

            merci de vos retours

Tabs multi niveaux

1 réponse