Tabs in module Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skinReturn to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
2 posters

    Tabs in module

    IdaTR
    IdaTR
    Forumember


    Female Posts : 547
    Reputation : 1
    Language : Danish, english
    Location : Denmark

    Tabs in module Empty Tabs in module

    Post by IdaTR November 8th 2014, 2:28 pm

    hallo!

    Is it possible to put up tabs in the module?
    like on this page:
    http://the-magic-fields.proboards.com/
    Mati
    Mati
    Active Poster


    Posts : 1928
    Reputation : 331
    Language : HTML, CSS & JavaScript
    Location : Forum Services

    Tabs in module Empty Re: Tabs in module

    Post by Mati November 8th 2014, 2:34 pm

    Hello, IdaTR

    You mean the on with the text such as "cbox info staff updates links"
    IdaTR
    IdaTR
    Forumember


    Female Posts : 547
    Reputation : 1
    Language : Danish, english
    Location : Denmark

    Tabs in module Empty Re: Tabs in module

    Post by IdaTR November 8th 2014, 2:35 pm

    Yup ! Thats it!
    Is that possible? (:
    Mati
    Mati
    Active Poster


    Posts : 1928
    Reputation : 331
    Language : HTML, CSS & JavaScript
    Location : Forum Services

    Tabs in module Empty Re: Tabs in module

    Post by Mati November 8th 2014, 3:02 pm

    The CSS code for tabs.
    Code:
    #tabs_container {
     border-bottom: 1px solid #ccc;
    }
    #tabs {
     list-style: none;
     padding: 5px 0 4px 0;
     margin: 0 0 0 10px;
     font: 0.75em arial;
    }
    #tabs li {
     display: inline;
    }
    #tabs li a {
     border: 1px solid #ccc;
     padding: 4px 6px;
     text-decoration: none;
     background-color: #eeeeee;
     border-bottom: none;
     outline: none;
     border-radius: 5px 5px 0 0;
     -moz-border-radius: 5px 5px 0 0;
     -webkit-border-top-left-radius: 5px;
     -webkit-border-top-right-radius: 5px;
    }
    #tabs li a:hover {
     background-color: #dddddd;
     padding: 4px 6px;
    }
    #tabs li.active a {
     border-bottom: 1px solid #fff;
     background-color: #fff;
     padding: 4px 6px 5px 6px;
     border-bottom: none;
    }
    #tabs li.active a:hover {
     background-color: #eeeeee;
     padding: 4px 6px 5px 6px;
     border-bottom: none;
    }

    #tabs_content_container {
     border: 1px solid #ccc;
     border-top: none;
     padding: 10px;
    }
    .tab_content {
     display: none;
    }

    The HTML code for the tabs.

    Code:
    <div id="tabs_container">
        <ul id="tabs">
            <li class="active"><a href="#tab1">Tab 1</a></li>
            <li><a href="#tab2">Tab 2</a></li>
            <li><a href="#tab3">Tab 3</a></li>
        </ul>
    </div>
    <div id="tabs_content_container">
     <div id="tab1" class="tab_content" style="display: block;">
     
     <p>Content for the first tab</p>
        
    </div>
    <div id="tab2" class="tab_content">
     <p>Content for the second tab</p>
     </div>
        
     <div id="tab3" class="tab_content">
        
     <p>
      Content for the third tab  
     </p>
        
     </div>
        
    </div>

    Javascript Code for tabs
    Code:
    $(document).ready(function(){
       $("#tabs li").click(function() {
          //   First remove class "active" from currently active tab
          $("#tabs li").removeClass('active');

          //   Now add class "active" to the selected/clicked tab
          $(this).addClass("active");

          //   Hide all tab content
          $(".tab_content").hide();

          //   Here we get the href value of the selected tab
          var selected_tab = $(this).find("a").attr("href");

          //   Show the selected tab content
          $(selected_tab).fadeIn();

          //   At the end, we add return false so that the click on the link is not executed
          return false;
       });
    });

    Please post below if you don't understand it.
    IdaTR
    IdaTR
    Forumember


    Female Posts : 547
    Reputation : 1
    Language : Danish, english
    Location : Denmark

    Tabs in module Empty Re: Tabs in module

    Post by IdaTR November 8th 2014, 3:10 pm

    It's not possible to put recent topics into it too? ^^ or login options?
    Mati
    Mati
    Active Poster


    Posts : 1928
    Reputation : 331
    Language : HTML, CSS & JavaScript
    Location : Forum Services

    Tabs in module Empty Re: Tabs in module

    Post by Mati November 8th 2014, 3:14 pm

    I'm not sure but let me do some test's on my forum and see what I come up with...
    IdaTR
    IdaTR
    Forumember


    Female Posts : 547
    Reputation : 1
    Language : Danish, english
    Location : Denmark

    Tabs in module Empty Re: Tabs in module

    Post by IdaTR November 8th 2014, 3:17 pm

    Sure (: I'm waiting then.
    Mati
    Mati
    Active Poster


    Posts : 1928
    Reputation : 331
    Language : HTML, CSS & JavaScript
    Location : Forum Services

    Tabs in module Empty Re: Tabs in module

    Post by Mati November 9th 2014, 4:18 pm

    Hi, IdaTR

    I'm sorry but I can figure this out. Sad
    IdaTR
    IdaTR
    Forumember


    Female Posts : 547
    Reputation : 1
    Language : Danish, english
    Location : Denmark

    Tabs in module Empty Re: Tabs in module

    Post by IdaTR November 11th 2014, 5:31 pm

    Ah i see :/ 
    Well thanks for trying anyway ! (: