The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Tabs in module

View previous topic View next topic Go down

Tabs in module

Post by IdaTR on 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
Forumember

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

http://nionevrien.forumq.net/

Back to top Go down

Re: Tabs in module

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

Hello, IdaTR

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

Mati
Active Poster

Posts : 1873
Reputation : 281
Language : || HTML || CSS || jQuery ||
Location : At the Gym

http://elite-gaming.forumotion.net/

Back to top Go down

Re: Tabs in module

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

Yup ! Thats it!
Is that possible? (:

IdaTR
Forumember

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

http://nionevrien.forumq.net/

Back to top Go down

Re: Tabs in module

Post by Mati on 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
Active Poster

Posts : 1873
Reputation : 281
Language : || HTML || CSS || jQuery ||
Location : At the Gym

http://elite-gaming.forumotion.net/

Back to top Go down

Re: Tabs in module

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

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

IdaTR
Forumember

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

http://nionevrien.forumq.net/

Back to top Go down

Re: Tabs in module

Post by Mati on 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
Active Poster

Posts : 1873
Reputation : 281
Language : || HTML || CSS || jQuery ||
Location : At the Gym

http://elite-gaming.forumotion.net/

Back to top Go down

Re: Tabs in module

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

Sure (: I'm waiting then.

IdaTR
Forumember

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

http://nionevrien.forumq.net/

Back to top Go down

Re: Tabs in module

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

Hi, IdaTR

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

Mati
Active Poster

Posts : 1873
Reputation : 281
Language : || HTML || CSS || jQuery ||
Location : At the Gym

http://elite-gaming.forumotion.net/

Back to top Go down

Re: Tabs in module

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

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

IdaTR
Forumember

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

http://nionevrien.forumq.net/

Back to top Go down

View previous topic View next topic Back to top


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