i need to shift tabs on clicking the NEXT green button at the end of each tab.
here it is http://www.cmsonlinehelp.com/ann/events
currently whats happening is that i am able to move to tabs by clicking on them.
but i need to move to next tabs on clicking the NEXT button.
Here is my script code :
<script type="text/javascript">
var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>
I am using this in my navigation:
<ul id="countrytabs" class="shadetabs">
<li>Photography Coverage</li>
<li>Video Coverage</li>
<li>Dj Coverage</li>
<li>Event Details</li>
</ul>
Giving id's to the single tabs div like:
<div id="country1" class="tabcontent">
<div id="country2" class="tabcontent">
<div id="country3" class="tabcontent">
<div id="country4" class="tabcontent">
Just call the click event of the tab link. So for the first "Next" button your javascript would call document.getElementById('videocoverage').click()
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
}
I have the javascript here for menu toggle
//navicon//
$(document).ready(function(){
$('#nav-icon2').click(function(){
$(this).toggleClass('open');
});
});
Here is the html portion
<header>
<div class="logo pull-left"><img src="images/logo.png" alt="" title=""></div>
<div class="navigation pull-right">
<a href="JavaScript:Void(0);">
<div id="nav-icon2">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</a>
</div>
<div class="menu">
<nav>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 centered text-center">
<ul>
<li><a href="#top" >Home</a></li>
<li>About Design Mania</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact Us</li>
</ul>
</div>
</nav>
</div>
</header>
The problem is when i click the hamburger button the menu opens perfectly. I have the website as 1 page scroll. So when clicked on a menu item it goes to that portion perfectly. But still the X button is showing , when again clicked on it the hamburger button appearing and this time menu opens and the hamburger button is showing there , but selecting menu and going to specific portion is not a problem.
So the main problem is once it showing closing button while menu is closed and once showing hamburger while menu is opened and this continues. So everytime it needs 2 clicks to make it perfect.
Here is my menu toggle
//menu-toggle//
$(document).ready(function(){
$(".navigation").click(function(){
$(".menu").slideToggle();
});
});
Please help me.
Since your div #nav-icon2 is inside an anchor a you should prevent the default action :
$(function(){
$('#nav-icon2').click(function(e){
e.preventDefault();
$(this).toggleClass('open');
});
});
Hope this helps.
I'm rusty at javascript and HTML, and trying to get back into it.
Here's the sample code of the element I'd like to modify:
<div id="tabContainer" class="table">
<h1>Container</h1>
<ul class="tabs">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="tab_display">
<div id="tab1" class="tab_content"></div>
<div id="tab2" class="tab_content"></div>
<div id="tab3" class="tab_content"></div>
</div>
</div>
I'm using a version of jQuery Accordion to switch between tabs,and it works without any trouble. Clicking on tab 2, while tab 1 is selected, will clear 'tab_display' and display the contents of tab 2.
I would like to control what tab is displayed, by clicking for a button for example.
If tab 1 is being displayed and I click another button on the page, I'd like for a specific tab to be displayed (show the selection on the 'tabs' list, and also show the contents in the 'tab_dsiplay').
How can I do this?
Thanks!
Try using the solution here open-jquery-accordion-panel-with-link-outside-of-acccordion
Demo here.
I am using simpelmodal to create dialog in jquery, but now the issue is in one of my html page i am adding
li elements dynamically , and when on a click of a button i try to fire $("attachment-modal-content").modal() dialog box doesnt appear until i again tap over a screen or move the screen. as soon as i move the screen it appears.
notable things is that if i dont load any li elements in the page , it popups normally.
here is the example page , initially attachment-modal-content is set to display:none
<div>
<a href="#" id="openDialog" />
<ul id="mylist">
</ul>
<div id="attachment-modal-content">
<h3>Attachment</h3>
<ul class="attachment">
<li id="imageBtn" class="green"><em><i class="fa fa-camera"></i></em><span>Image</span></li>
<li id="audioBtn" class="red"><em><i class="fa fa-volume-up"></i></em><span>Audio</span></li>
<li id="videoBtn" class="yellow"><em><i class="fa fa-video-camera"></i></em><span>Video</span></li>
<li id="linkBtn" class="blue"><em><i class="fa fa-link"></i></em><span>Link</span></li>
</ul>
<ul class="attachList">
</ul>
</div>
</div>
</div>
button code
$("#openDialog").on('click',function(){
$("#attachment-modal-content").modal();
});
once i load the date using $('#mylist').append('<li><li>') , dialog wont appear on a first button click , it appears
when i move the screen.
In my asp.net mvc application I have a modal popup.In modal popup i have three divs displayed like tabs.each div has buttons "Next","Back".on click of these buttons i want to navigate between these divs
sample code
<div id="Div1">
<ul>
<li><a id="btnone" href="#OneTab">one</a></li>
<li><a id="btTwo" href="#TwoTab">Two</a></li>
<li><a id="btnThree" href="#ThreeTab">Three</a></li>
</ul>
<div id="OneTab>
<input id="btnNext Type="button/>
<input id="btnBack Type="button/>
</div>
<div id="TwoTab>
</div>
<div>
Please suggest
Thanks
using foloowing line of code on "Onclick" event of button
$('#Div1').tabs("select", tabid);
Here tabid is the id of the tab on which you want to navigate
The code change done is
as below