I created content area for jquery tabs.With block that contains TAB name and Tab content. The sturcture is like below
<div id="tabs">
<!-- Nav tabs -->
<ul class="nav nav-tabs nav-justified" role="tablist">
<li class="active" role="presentation">
<a aria-controls="home" data-toggle="tab" href="#home" role="tab">INTRODUCTION</a>
</li>
<li role="presentation">
<a aria-controls="profile" data-toggle="tab" href="#profile" role="tab">OUR HOLIDAYS TO ITALY</a>
</li>
<li role="presentation">
<a aria-controls="messages" data-toggle="tab" href="#messages" role="tab">ABOUT ITALIAN EXPRESSION</a>
</li>
<li role="presentation">
<a aria-controls="settings" data-toggle="tab" href="#settings" role="tab">ITALY HOLIDAY HIGHLIGHTS</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content tabgrey">
<div class="tab-pane fade in active country_content" id="home" role="tabpanel">test</div>
<div class="tab-pane fade country_content" id="profile" role="tabpanel">test</div>
<div class="tab-pane fade country_content" id="messages" role="tabpanel">test</div>
<div class="tab-pane fade country_content" id="settings" role="tabpanel">asdsadsad</div>
</div>
</div>
If I try to render this structure through view of a block. I can't emulate it.
Since I have to put all li's inside one ul and all divs inside tab-content.
I would suggest to not render this with #Html.PropertyFor(), not with that markup anyway. Because you would end up with a lot of display templates and helper methods. Create a view model instead where everything is already put together nicely. Then loop through your view model twice, one time for the unordered list and then for every tab pane.
Related
I am currently working on a global search page. A user puts in a search, All results are displayed. But then I want the user to be able to click on certain tabs to display the results as well. It is currently bootstrapped. The all tabs is the only one that is currently working because it is the class is set to active. The all tab also wraps the other tabs. I will try to give an example if I wanted to display Events
I first have the nav tab section set like this...
<div class="search-tab">
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#all">All</a></li>
<li><a data-toggle="pill" href="#events_tab">Events</a></li>
<li><a data-toggle="pill" href="#appointments_tab">Appointment</a></li>
<li><a data-toggle="pill" href="#phonecalls_tab">Phone Calls</a></li>
<li><a data-toggle="pill" href="#vendors_tab">Vendors</a></li>
</ul>
</div>
And then the data I want to retrieve is wrapped inside the all div tab like the events_tab here.
<div id="all" class="tab-pane fade in active">
<div class="list-panel table-sort" id="events_tab">
this will display the events related to the search...
</div>
</div>
I am fairly new to using bootstrap. Any advice/tips would be a huge help. Thanks in advance!
Its a little unclear as to whether you want All to have nested tabs or not. However, regarding Bootstraps tab HTML markup pattern, you'll want to wrap your .tab-pane in a .tab-content wrapper. Also, be sure you're including jQuery as well as Bootstraps JS bundle (after jQuery) so the data- attributes can be used.
Updated HTML for non-nested tabs and tab panes
<div class="search-tab">
<ul class="nav nav-pills">
<li class="active"><a data-toggle="tab" href="#all">All</a></li>
<li><a data-toggle="pill" href="#events_tab">Events</a></li>
<li><a data-toggle="pill" href="#appointments_tab">Appointment</a></li>
<li><a data-toggle="pill" href="#phonecalls_tab">Phone Calls</a></li>
<li><a data-toggle="pill" href="#vendors_tab">Vendors</a></li>
</ul>
</div>
<div class='tab-content'>
<div id="all" class="tab-pane fade show active">
all area
</div>
<div id='events_tab' class='tab-pane fade'>
events area
</div>
</div>
Here is a fiddle showing the updated markup without nested tabs:
https://jsfiddle.net/onuj90dz/
If you're wanting to show the search results in addition to these other categories (events, appointments, calls, vendors), you could put the results in a non-tab container. A crude example in this fiddle: https://jsfiddle.net/onuj90dz/1/
I'm having trouble with bootstraps tabs and tabpanels not working with the active class as intended. I know there are many questions about this, but in all the ones I have read, adding and removing the inactive class is not working at all. In my case, it works... but kind of. First I'll provide the HTML:
<ul class="nav nav-pills hr-divider-content hr-divider-nav">
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#a-tab" aria-expanded="false">A</a>
</li>
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#b-tab" aria-expanded="true">B</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#c-tab" aria-expanded="false">C</a>
</li>
</ul>
<div class="tab-content">
<div id="a-tab" class="tab-pane highlight active" aria-expanded="true">
</div>
<div id="b-tab" class="tab-pane highlight" aria-expanded="false">
</div>
<div id="c-tab" class="tab-pane highlight" aria-expanded="false">
</div>
</div>
The JavaScript comes from just including all the bootstrap 4 stuff.
So here's the thing, it starts off with some issues, being that as you click between the 3 tabs it will usually show 2 of them, but after clicking around for about 10 seconds it seems to fix itself and work completely as intended, showing only the content for the currently selected tab. I also use the same exact code with different names in other locations on my site, and it works perfectly fine.
Does anyone have any intuition into what would be causing the content to show incorrectly only the first 10 or so times clicking through the tabs, but then it works perfectly well until the page is refreshed?
First of all you have to apply active class properly.You have given active class to a link but it should be into li.nav-item and also in your nav items you have given your active class to #b-tab and in below given active class to a-tab content. Look at updated HTML code
<ul class="nav nav-pills hr-divider-content hr-divider-nav">
<li class="nav-item active">
<a class="nav-link" data-toggle="pill" href="#a-tab" aria-expanded="false">A</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#b-tab" aria-expanded="true">B</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#c-tab" aria-expanded="false">C</a>
</li>
</ul>
<div class="tab-content">
<div id="a-tab" class="tab-pane highlight active" aria-expanded="true">
a-tab content
</div>
<div id="b-tab" class="tab-pane highlight" aria-expanded="false">
b-tab content
</div>
<div id="c-tab" class="tab-pane highlight" aria-expanded="false">
c-tab content
</div>
</div>
I think there was a bug in the initial Bootstrap 4 code, I was using Bootstrap 4.0.0 beta when I encountered this issue. I downloaded Bootstrap version 4.1.3 and now the active class gets removed from the tab-pane as expected.
I need to completely destroy Bootstrap tabs. The original markup from Bootstrap docs:
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">...</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>
Desired markup after complete destroy is something like this:
<div>
<ul>
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<div>
<div class="active" id="home">...</div>
<div id="profile">...</div>
<div id="messages">...</div>
<div id="settings">...</div>
</div>
</div>
So the goal is to remove all the Bootstrap classes, listeners, etc. Is there a function/method in Bootstrap 3 for that?
Btw, please I am not looking for "solution" like $.removeClass('.nav, .nav-tabs, .tab-pane','#bla'); & $.removeAttr('role','#bla'); etc.
There is no JS function in Bootstrap 3 that does what you want. Checkout their docs http://getbootstrap.com/javascript/. Are you just trying to remove the attributes from the DOM with client-side JavaScript, or permanently change the HTML on the server?
Either way, it sounds like you will need to write some custom code to accomplish your goal, since it is not something commonly done.
Basically there are 2 pages with me :-
Index page
<div class="box-footer text-center">
View my Groups
</div>
MyGroups.html
<ul class="nav nav-tabs pull-right ui-sortable-handle">
<li class=""><a id="clickSearch" data-toggle="tab" href="#search" aria-expanded="false">Search</a></li>
<li class=""><a data-toggle="tab" href="#sent" aria-expanded="false">My Groups</a></li>
<li class="active"><a data-toggle="tab" href="#all" aria-expanded="true">All Groups</a></li>
<li class="pull-left header"><i class="fa fa-inbox"></i> Groups</li>
</ul>
<div id="sent" class=" tab-pane">
//some content
</div>
Now how can user be redirected from HTML page 1 on clicking " View my groups" to the #sent div on another Html page ?
Things seacrhed :- Using jquery .click() function
But Need proper guidance in syntax .
Had a look on this , got the basic idea but still not able to achieve what's needed .
You can link directly from the href of the first page
View my Groups
adding the #sent to the link will automatically scroll to the appropriate div
I have a menu which is included in file A and B. I don't want any of my tabs to be active at first but after clicking on them I want to set the correct list item's class="active". I thought that the code below would do it. What do I need to add or change?
<ul id="navbar_menu" class="nav nav-tabs">
<li><a data-toggle="tab" href="#">A</a></li>
<li><a data-toggle="tab" href="#">B</a></li>
</ul>
FYI: I have included the following for the HTML page (do I need anything more than this):
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
http://getbootstrap.com/javascript/#tabs
According to Bootstrap's documentation (under the title "Markup"), you are still missing some HTML.
So this is mostly right, except we need the a link's href to point to an id of your actual tab, and not just a hash mark #.
<ul id="navbar_menu" class="nav nav-tabs">
<li><a data-toggle="tab" href="#tab1">A</a></li>
<li><a data-toggle="tab" href="#tab2">B</a></li>
</ul>
And then we need the actual tabs to be created.
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="tab1">...</div>
<div role="tabpanel" class="tab-pane" id="tab2">...</div>
</div>
Hope it helps!