Hide tabs if content is empty - html

I am creating a shop using prestashop.
My problem is, in product description I have two bootstrap tabs
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#op">One</a></li>
<li><a data-toggle="tab" href="#conf">Spec</a></li>
</ul>
The first one is general description and the other one is more technical.
But not every product has that second description, so the content is empty.
My question is, how can i make only first tab visible when there is need to?
EDIT:
Guys I don't know if I wrote that straight.
I need tab to be hidden when the div content it 'points' on is empty.
Thanks

Add a class inside your second tab,and run this Jquery
$(".someclass").each(function(){
var $txt=$(this).text();
if($txt==""){
$(this).closest('li').hide();
}
})
Without text DEMO
With text DEMO
For Multiple empty tab contents

This should to it:
$('.nav-tabs li').each(function () {
$tab = $(this)
if ($tab.text() === '') {
$tab.hide()
}
}

Maybe it's too late! But i write my answer here to help somebody.
I had a nav-tab like this with bootstrap that i wanted to hide the tabs with no content:
<ul class="nav nav-tabs" role="tablist" id="descriptionTab">
<li class="active">
introduction
</li>
<li>
access
</li>
<li>
times
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content" style="position:relative;">
<div class="tab-pane fade active in EmptyFind" id="introduction">
<h2>some text here</h2>
</div>
<div class="tab-pane fade EmptyFind" id="access">
<h2>some text here</h2>
</div>
<div class="tab-pane fade EmptyFind" id="times">
<h2> <!-- no content or some whitespace --> </h2>
</div>
</div>
So we can add these lines of jquery code to hide "#times" tab that has no content in it:
<script>
$(document).ready(function() {
$('.EmptyFind').each(function() {
var $txt=$(this).text().trim().length;
var $dataTarget=$(this).attr('id');
if ($txt < 1) {
$('#descriptionTab a[href="#' + $dataTarget + '"]').closest('li').hide();
}
});
});
</script>
I hope it will be helpfull :)

Related

Twitter Bootstrap's Dropdown menu not working in Nav-Tabs NavBar in JS Fiddle

I've been having so many problems getting this Twitter Bootstrap Nav bar to work in JS Fiddle; I finally got it to render the way I wanted nothing is dropping down from my dropdown menu (under the tab "Community")- I don't know what the problem is. I got it to work functionally when I did it in a text-editor, my code seems to be exactly the same, but in JS Fiddle (where I need it to work) when I press the button, nothing drops down & I can't figure out why, I've tried changing so many things- if anyone can help or direct me to why this isn't working, I'd so so appreciate it (I tried changing the li to a div which ruined the styling of the whole thing, I tried adding data-toggle to each <a> element in the dropdown, also nothing, I just don't know what to do at this point or what I'm doing wrong. I hope I have enough/the right external resources added to this (in JS Fiddle, you can't add them to the html or it doesn't render correctly). Any help would be greatly appreciated.
Here's a link to my Fiddle: https://jsfiddle.net/Tamara6666/2cup6cno/
Heres' my code:
<header>
</header>
<body>
<ul id="myTab" class="nav nav-tabs">
<li>
<a href="#">
<icon class="fa fa-home"></icon>
</a>
</li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Community</a>
<ul class="dropdown-menu">
<li>Member Activity</li>
<li>Member Forum</li>
<li>Member Lists</li>
<li>Member Groups</li>
</ul>
</li>
<li role="presentation">Pet Help</li>
<li role="presentation">Pets for Sale</li>
<li role="presentation">Pet Services</li>
</ul>
<main>
<div id='content' class="tab-content">
<div class="tab-pane active" id="home">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</main>
</body>
Add
<script type="text/javascript">$(".dropdown-toggle").dropdown();</script>
</body>
Also don't forget to add jquery before including bootstrap.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
You didn't include jQuery, as Bootstrap.js requires jQuery. If you open the browser console, the error is caught there Uncaught Error: Bootstrap's JavaScript requires jQuery
Adding jQuery will fix the issue you're having. I've revised your fiddle (https://jsfiddle.net/2cup6cno/9/) to include the other tab panes. You can modify them or remove it, completely up to you.
Check out the examples on Bootstrap on the correct markup and usage of using tabs at http://getbootstrap.com/javascript/#tabs

Change active Bootstrap menu item using html and css

I want to be able to change which menu item in is active depending on which file I am in. I include menu.html (the file below) in my three files: a.html, b.html and c.html.
How can I do this using only html and css? I use the Boostrap menu.
I basically want to change the menu item which is active according to the current file I am in.
<ul id="navbar_menu" class="nav nav-tabs nav-justified">
<li id="a">a</li>
<li id="b">b</li>
<li id="c">c</li>
</ul>
If I'm correct you should make an active class and added it to the actual active list-item.
To my understanding you're using PHP include for menu.
You can do this to automatically find the relevant menu to the current page:
In your 3 pages you add the "relevant class" to your div/section that is the wrapper:
<section class="a">
<!-- your php include for menu-->
</section>
Second page:
<section class="b">
<!-- your php include for menu-->
</section>
Third page:
<section class="c">
<!-- your php include for menu-->
</section>
And in your CSS:
.a > li#a {
/* Active Menu Style */
}
.b > li#b {
/* Active Menu Style */
}
.c > li#c {
/* Active Menu Style */
}
This will enable the menu for the current page with your php include file:
<ul>
<li id="a">a</li>
<li id="b">b</li>
<li id="c">c</li>
</ul>

Foundation 4 topbar nav on mobile not showing

I have a problem with Foundation 4 rendering on a small screen.
When on a local server i have the following html code, my custom css is turned of and so is my cutom js. All the needed libraries are loaded correctly as is the foundation library:
Why isnt my topbar showing in a very small browser window?
Below is a html snippet:
<div class="row show-for-touch show-for-portrait show-for-small">
<nav class="top-bar">
<ul class="title-area">
<li class="name">
<h1>title</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li><h4>Dungeon</h4></li>
<li><h4>Pricing information</h4></li>
<li><h4>Contact</h4></li>
</ul>
</section>
</nav>
</div>
You won't be able to see your bar in a small browser if you add this visibility class: show-for-touch, which displays only on a real mobile environment.
If you like to see on a small browser, simply remove this class:
<div class="row show-for-portrait show-for-small">
It works on this plunk.

How do I change the content but not the tab with Spry Tabbed Panels?

I have a site that consists mainly of Spry Tabbed Panels.
Right now I have it working where you click on a different tab and the content changes with the change of tab. But now I have links inside of the content of my tabs that I would like to link to a different page but in the same tab. How do I do this?
Here is an example of what I'm talking about on the Wells Fargo site:
First Tab:
https://www.wellsfargo.com/investing/retirement/ira/
Clicked Link In Tab (but the tab doesn't change):
https://www.wellsfargo.com/help/faqs/investing/ira
And if you would like to show me an answer in the context of my site, here is my site:
http://emilymagnuson.com
My understanding is that you want to create pages inside a tabbed panel. The solution can be: creating another Spry Tabbed Panel inside the Spry Tabbed Panel.
EDITED with sample Links: Here's the source code:
<body>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Main Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0">Main Tab 2</li>
<li class="TabbedPanelsTab" tabindex="0">Main Tab 3</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Main Content 1</div>
<div class="TabbedPanelsContent">Main Content 2
<div id="TabbedPanels2" class="VTabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Sub Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0">Sub Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Sub Content 1
<li>Link here</li>
<li>Link here</li>
<li>Go to Menu 2</li>
</div>
<div class="TabbedPanelsContent">Sub Content 2</div>
</div>
</div>
</div>
<div class="TabbedPanelsContent">Main Content 3</div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
var TabbedPanels2 = new Spry.Widget.TabbedPanels("TabbedPanels2");
</script>
</body>
And in your CSS, add this:
.VTabbedPanels .TabbedPanelsTabGroup {
display: none;
}
Now, the tab inside the tabbed panel is hidden. Only the content is shown.
Also, add this to widen the width of your panel content's content:
.VTabbedPanels .TabbedPanelsContentGroup {
width: 99%;
height: 100%;
border: 0;
}
NOTES:
For:
Go to Menu 2
showPanel(0) - 1st tab; showPanel(1) - 2nd tab, and so forth.

How to make tabs fixed size in twitter bootstrap

What's the best way to fix the width and height of left tabs in twitter bootstrap to use it as a fixed size navigation bar? Questions are better illustrated in the code below.
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
<li class="nav-header">Questions</li>
<li class=""><a data-toggle="tab" href="#lA">------ Question 1 -------</a></li>
<li class="active"><a data-toggle="tab" href="#lB">------ Question 2 ------</a></li>
</ul>
<div class="tab-content">
<div id="lA" class="tab-pane">
<p>How do I fix the width of this section as to avoid using the --------</p>
</div>
<div id="lB" class="tab-pane active">
<p>Can I fix the height as well?</p>
</div>
</div>
</div>
I'm not really familiar with Bootstrap but as no body else has answered, here goes...
Since the two elements you have highlighted both have IDs, why cant you just give them specific widths / heights?
#1A {
width: 300px;
}
#1B {
height: 30px;
}
As I say, I'm not familiar with Bootstrap so I may be misunderstanding your question but that seems like the simple solution to me.