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.

Tabs in module

2 posters

Go down

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/
IdaTR
IdaTR
Forumember

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

http://www.vielamort.net

Back to top Go down

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"
Mati
Mati
Active Poster

Posts : 1933
Reputation : 333
Language : HTML, CSS & JavaScript
Location : Forum Services

https://fm-focus.forumotion.com/

Back to top Go down

Tabs in module Empty Re: Tabs in module

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

Yup ! Thats it!
Is that possible? (:
IdaTR
IdaTR
Forumember

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

http://www.vielamort.net

Back to top Go down

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.
Mati
Mati
Active Poster

Posts : 1933
Reputation : 333
Language : HTML, CSS & JavaScript
Location : Forum Services

https://fm-focus.forumotion.com/

Back to top Go down

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?
IdaTR
IdaTR
Forumember

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

http://www.vielamort.net

Back to top Go down

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...
Mati
Mati
Active Poster

Posts : 1933
Reputation : 333
Language : HTML, CSS & JavaScript
Location : Forum Services

https://fm-focus.forumotion.com/

Back to top Go down

Tabs in module Empty Re: Tabs in module

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

Sure (: I'm waiting then.
IdaTR
IdaTR
Forumember

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

http://www.vielamort.net

Back to top Go down

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
Mati
Mati
Active Poster

Posts : 1933
Reputation : 333
Language : HTML, CSS & JavaScript
Location : Forum Services

https://fm-focus.forumotion.com/

Back to top Go down

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 ! (:
IdaTR
IdaTR
Forumember

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

http://www.vielamort.net

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum