My about page have three jquery tabs(I have used easy tab plugin). When I refresh the page with second tab the header portion is not showing up. and when I click the tab in a new browser tab also the header is not showing up. How can I solve this?? (Just click the second tab and refresh the page)
here my content
<div id="tab-container" class='tab-container'>
<ul class='etabs'>
<li class='tab'>
<a href="#tabs1-html">
HTML Markup
</a>
</li>
<li class='tab'>
<a href="#tabs1-js">
Required JS
</a>
</li>
<li class='tab'>
<a href="#tabs1-css">
Example CSS
</a>
</li>
</ul>
<div class='panel-container'>
<div id="tabs1-html">
<h2>
HTML Markup for these tabs
</h2>
<p>
Dummy content
</p>
</div>
<div id="tabs1-js">
<h2>
JS for these tabs
</h2>
<p>
dummy content 2
</p>
</div>
<div id="tabs1-css">
<h2>
CSS Styles for these tabs
</h2>
<p>
dummy content 3
</p>
</div>
</div>
</div>
Here my Js
<script type="text/javascript">
$(document).ready( function() {
$('#tab-container').easytabs();
});
</script>
javascript link1
javascript link 2
Here my page link
Live page
Your code JS :
$(document).ready( function() {
$('#tab-container').easytabs();
});
is not executed.
If you execute it in the console, you will see your tabs correctly displayed.
Where have you put this code ?
Related
I have a button in my index page when clicking on that button I need to open a specific tab section of another page. the button is on one page and the tab is on the second page.
I have multiple tabs on the 2nd page but only writing here 1 tabs that one I need to open when is clicked from home page
Page 1 - Where I have a button
<p>View Example Worksheet</p>
Page 2 - tabs exist
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link " data-toggle="tab" href="#w1">Worksheet</a>
</li>
<div id="w1" class="container tab-pane fade"><br>
<div class="container">
<div class="row">
<div class="col-12 col-sm-11">
<p class="f-15 gry2">The primary use of this worksheet is to provide a detailed checklist that will facilitate precise development of specifications with drawings, to ensure that all parties are talking about the same type and quality of building.</p>
<p>
</div>
</div>
</div>
</div>
Firstly this is not right way for tabs UI.
But if you want use
<script>
$(document).ready(function(){
$(".btn_readmore2").click(function(){
$("#w1").load("demo_test.txt");
});
});
</script>
other way find function is useful with is visible option you can check.
if($("#w1:visible")){
write you show action code here
}
When trying to create a nested accordion, is it possible to create an anchor link and accordion inside another accordion using jquery?
For example, in my code I have <div> for the accordion content and <h3> for accordion header.
Code is https://jsfiddle.net/vsf8kwko/6/
<div id="outer-accordion">
<h3>Outer Section </h3>
<!-- I need to add anchor link under here and not an accordion. Is this possible -->
<!--<div><li>LINK</li></div>-->
<!-- inner accordian -->
<div id="inner-accordion" >
<h3>Inner Section </h3> //Accordion header
<div> //Accordion content
<p>Inner Mauris LINK.</p>
</div>
</div>
<!-- inner accordian -->
</div>
You need to put both your link and your inner-accordion inside li tags. I have updated your fiddle. Check it now
<div id="outer-accordion">
<h3>Outer Section </h3>
<!-- I need to add anchor link here and not an accordion. Is this possible -->
<ul>
<li>LINK</li>
<li>
<!-- inner accordian -->
<div id="inner-accordion" >
<h3>Inner Section </h3>
<div>
<p>Inner Mauris LINK.</p>
</div>
</div>
<!-- inner accordian -->
</li>
</ul>
</div>
I want bootstrap to show several elements inside tab header button, currently it breaks into multiple buttons...
Consider example jsFiddle:
<ul class="nav nav-tabs">
<li class="allmembers">
The first
tab
</li>
<li class="additional">
The second
tab
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="allmembers">
Content
<p> next</p>
</div>
<div class="tab-pane" id="additional">
Content 2
</div>
</div>
In example above it would show four tabs instead of two, but I need bootstrap to be able to render complex html, something like:
<ul class="nav nav-tabs">
<li class="all members">
<div>
Any type of content displayed inline here
The first
tab
</div>
</li>
<li class="additional">
<div>
Any type of content displayed inline here
The second
tab
</div>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="allmembers">
Content
<p> next</p>
</div>
<div class="tab-pane" id="additional">
Content 2
</div>
</div>
How can
You can use all inline elements inside a tab header, you just need to wrap them inside an anchor, like this:
<a href="#additional" data-toggle="tab">
The second <br/>
Any type of content displayed inline here <br/>
<span>Span</span>
</a>
The reason is that bootstrap style for panel header is placed on anchor, if you need more complex structures you might need to change bootstrap and place the styles on li instead.
your demo: http://jsfiddle.net/zd1368yu/3/
I am working on jquery. I have 4 tabs within the <li> tags. I have used jquery 1.9.1.js for my project. my <li> looks like the one below. I got a solution to use http://www.asual.com/jquery/address/docs/#api-reference. But the fact is that I have used and imported this external lib but it doesn't seem to work. The thing which i am trying to attain is when ever I select the specific <li> item and press f5 the page by default loads the first <li> item. But the thing which I am looking for is , it has to load the same selected <li> item and its contents when refreshed. any help would be appreciated.
Here is my HTML code:
<div class="container">
<div class="coolbar">
<div class="cool-inner">
<ul id="mybar" class="nav cool-tabs">
<li class="Coke">
Coke <span class="dashboard-bottom"></span>
</li>
<li class="Fanta">
Fanta<span class="Pricing-bottom"></span>
</li>
<li class="Pepsi">
Pepsi<span class="Promotion-bottom"></span>
</li>
<li class="Limca">
Limca<span class="Product-bottom"></span>
</li>
</ul>
</div>
</div>
</div>.
<div id="login">
<button type="button" id="submit" value="Login" class="btn">Click me for cool drinks</button>
</div>
And my jquery code for page refresh:
$(function() {
$('#submit').click(function() {
$('.container').show();
$('#login').hide();
$.cookie('shown', true);
});
if ($.cookie('shown')) {
$('#submit').click()
}
});
Thanks in advance.
when activating the tab you may want to set the tabs position/value in the cookie and when the page loads, check if tabs position/value exist in the cookie, then accordingly activate that tab or trigger click event on that tab.
may this help
How do I get the jQuery UI Accordion to work when I need to put a wrapper around each element?
Example HTML:
<ul>
<li>
<h3>header</h3>
<div>
Content goes here
</div>
</li>
<li>
<h3>header</h3>
<div>
Content goes here
</div>
</li>
</ul>
I just can't seem to get it to work.
You cannot make the accordion work with your current markup. Elements must be siblings like this:
<div id="parentAccordionDiv">
<h3>header</h3>
<div>
Content goes here
</div>
<h3>header</h3>
<div>
Content goes here
</div>
</div>
I stand corrected. I got an accordion to work fine like this:
<script type="text/javascript">
$(function(){
$('#accordion').accordion();
})
</script>
<ul id="accordion">
<li>
<h3>header</h3>
<div>
Content goes here
</div>
</li>
<li>
<h3>header</h3>
<div>
Content goes here
</div>
</li>
</ul>