I use jQuery, and I have multiple tabs, that look mostly different. There is a selectbox that's shared over all tabs and I basically want it to have the same values and selected value over all the different tabs, so if it's changed in one tab then it's also changed in the other tab.
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div id="tab-1">
Content 1
<select>
<option>op1</option>
<option>op2</option>
</select>
</div>
<div id="tab-2">
Content 2
<select>
<option>op1</option>
<option>op2</option>
</select>
</div>
</div>
And the tabs get selected by
$(document).ready(function(){
$("#tabs").tabs();
}
I want the first selectbox to be copied on the second tab, or be equal to the other selectbox at all times. Is there a clean way to do this (not copying on tab.change() or something), or maybe a wholly different approach to this?
I hope it works for you. The code is written in very hurry. sorry for inconvenience.
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div id="tab-1">
Content 1
<span id="fcont"><select><option>op1</option><option>op2</option></select></span>
</div>
<div id="tab-2">
Content 2
<span id="scont"></span>
</div>
</div>
And in jQuery
$(function()
{
var mysel= "";
$("#tabs").tabs();
$('#tab-1').click(function()
{
mysel = $("#scont").html();
if(mysel)
{
$("#fcont").html(mysel);
$("#scont").html("");
}
});
$('#tab-2').click(function()
{
mysel = $("#fcont").html();
$("#scont").html(mysel);
$("#fcont").html("");
});
});
Have you tried using .clone jQuery function.
$(SELECT).clone().append(NEWTAB_HTML);
In Detail.
$(function()
{
$("#tabs").tabs();
$('#tab-2').click(function()
{
var newSelect = $('#tab-1 select').clone().attr('id','new_id_value');
$(this).append(newSelect);
});
});
Related
I have 2 lists of elements. When I click on an element of first list (it is a link), I basically need to add css class 'is-active' to that element AND to corresponding item from another list. I think they have to be in separate lists, as they are in two different bootstrap columns for mobile friendliness. I am currently styling elements from first list with:
$(document).ready(function(){
$('.tabs li').click(function(){
$(this).addClass('is-active');
$('.tabs li').not(this).removeClass('is-active');
});
})
Can't select elements from the other list though.. Any ideas how can I achieve this functionality with css, js/jquery?
My html structure currently is like this:
<div class="col-md-6">
<ul class="tabs">
<li class="tabs-title is-active">
title_1
</li>
<li class="tabs-title">
title_2
</li>
</ul>
</div>
<div class="col-md-6">
<div class="tabs-content">
<div class="tabs-panel is-active">
<div class="entry">
<p>content_1</p>
</div>
</div>
<div class="tabs-panel">
<div class="entry">
<p>content_2</p>
</div>
</div>
</div>
</div>
When I click on 2nd link from first column, the 2nd div from second column should get 'is-active' class. Is this possible?
I guess lists do not have corresponding elements right now. What do I need to have the items linked in some way?
Here's an example, since we don't know what your list looks like.
<ul class="tabs">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<ul class="letters">
<li>item a</li>
<li>item b</li>
<li>item c</li>
</ul>
Also, it's easier to remove all instances of the is-active class and then add it just to the target elements.
$(document).ready(function(){
$('.tabs li').click(function(){
var index = $('.tabs li').index(this);
$('.tabs li, .letters li').removeClass('is-active');
$(this).addClass('is-active');
$('.letters li').each(function(i) {
if (i == index)
$(this).addClass('is-active');
})
});
})
https://jsfiddle.net/fzeauw7a/
I want to create functionality for save the current tab on postabck.
for this reason:
1) How to find out the id of current tab.
2) How can pass that id to hidden variable.
I am not using jquery tabs due to some issue. I am creating script using plain jquery script.
This is my JS
$(document).ready(function () {
$('ul.tabs').each(function () {
var $a, $c, $ = $(this).find('a');
$a = $($links.filter('[href="' + location.hash + '"]')[0] || $links[0]);
$a.addClass('active');
This is HTML for tabs
<div class="co">
<ul class="tabs">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="tabs-1"> Content 1 </div>
<div id="tabs-2"> Content 2 </div>
<div id="tabs-3"> Content 3 </div>
</div>
If you are using jQuery UI tabs, easiest way
As Docs getter of active JqueryUI tab is
var active = $(".tabs").tabs( "option", "active" );
I'm having a list of products displayed. Once the show more is clicked the text within the extras class needs to be displayed, the show more needs to be hidden and show less needs to be visible. The opposite needs to happen when show less is clicked.
I used the below jQuery code and it works but the problem is that it shows/hide add the extra text in every block. I want it to show only the relevant block.
Javascript
$(document).ready(function() {
$('.extras').css("display", "none");
$('.showmore').click(function() {
$(".extras").toggle();
$('.showmore').hide();
$('.less').show();
});
$('.less').click(function() {
$(".extras").toggle();
$('.extras').hide();
$('.showmore').show()
});
});
HTML
<div class="blocks">
<div class="right">
<ul class="options">
<li class="x">Service 1</li>
<li class="y">Service 2</li>
<li class="z">Service 3</li>
<li class="r">Service 4</li>
<li class="k">Service 5</li>
</ul>
<div class="showmore"><a>+ show more</a></div>
</div>
<div class="extras">
<p>test text</p>
<div class="less"><a>- hide</a></div>
</div>
</div>
<div class="blocks">
<div class="right">
<ul class="options">
<li class="x">Service 1</li>
<li class="y">Service 2</li>
<li class="z">Service 3</li>
<li class="r">Service 4</li>
<li class="k">Service 5</li>
</ul>
<div class="showmore"><a>+ show more</a></div>
</div>
<div class="extras">
<p>test text</p>
<div class="less"><a>- hide</a></div>
</div>
</div>
<div class="blocks">
<div class="right">
<ul class="options">
<li class="x">Service 1</li>
<li class="y">Service 2</li>
<li class="z">Service 3</li>
<li class="r">Service 4</li>
<li class="k">Service 5</li>
</ul>
<div class="showmore"><a>+ show more</a></div>
</div>
<div class="extras">
<p>test text</p>
<div class="less"><a>- hide</a></div>
</div>
</div>
Any help will be appreciated.
Make sure you do your logic in relevant sections. Demo Here
Try:
$(document).ready(function () {
$('.extras').css("display","none");
$('.showmore').click(function () {
var parent = $(this).closest('.blocks');
$(parent).find(".extras").toggle();
$(parent).find('.less').show();
$(this).hide();
});
$('.less').click(function () {
var parent = $(this).closest('.blocks');
$(parent).find(".extras").toggle();
$(parent).find('.showmore').show();
$(this).hide();
});
});
Use .closest()
$(document).ready(function() {
$('.extras').css("display", "none");
$('.showmore').click(function() {
var $div = $(this).closest('.blocks');
$div.find(".extras").toggle();
$div.find('.showmore').hide();
$div.find('.less').show();
});
$('.less').click(function() {
var $div = $(this).closest('.blocks');
$div.find(".extras").toggle();
$div.find(".extras").hide();
$div.find('.showmore').show();
});
});
Check Fiddle
try using $(this).toggle() in the event handler.
Or I guess more completely, $('.extras').hide(); $(this).show();
Use the $(this) to get the relevant content,
so inside the $(".showmore").click(),
$(this).parents(".blocks").children(".extras").toggle();
$(this).parents(".blocks").children('.showmore').hide();
$(this).parents(".blocks").children('.less').show();
Test Link
You can combine closest, find and toggle to work.
So all your javascript can be changed to the following.
$('.showmore, .less').click(function() {
var $elements = $(this).closest('.blocks').find('.extras, .showmore');
$elements.toggle();
});
demo
References
Closest
Find
Toggle
I'm using JQuery tabs plugin and ajax json mvc to retrieve data inside these tabs.
Everything works ok with onclick events but I need to load content inside first tab as soon as page load.
Here's the code
<script>
$(function () {
$("#tabs").tabs();
// how to add onload event for Tab One GetTabData(id);
$(".tabLink").click(function (event) {
var id = $(this).parent().text();
GetTabData(id);
});
});
</script>
<div class="demo">
<div id="tabs">
<ul>
<li>Tab One</li>
<li>Tab Two</li>
<li>Tab three</li>
<li>Tab four</li>
</ul>
<div id="tab-1">
</div>
<div id="tab-2">
</div>
<div id="tab-3">
</div>
<div id="tab-4">
</div>
</div>
</div>
You can programatically click on the first one:
$(".tabLink").click(function (event) {
var id = $(this).parent().text();
GetTabData(id);
}).eq(0).click();
I need to load content inside first tab as soon as page load
Then load the content of the first tab on $(document).ready()
$(function(){
...your code...
//execute first
GetTabData(1);
});
My code:
<div id = "1">
<h1>Heading 1</h1>
<p class = "V">VVV</p>
<ul>
<li>line 1</li>
<li>line 2</li>
</ul>
<p class = "A">AAA</p>
</div>
<div id = "2">
<h1>Heading 2</h1>
<p class = "V">VVV</p>
<ul>
<li>line 1</li>
<li>line 2</li>
</ul>
<p class = "A">AAA</p>
</div>
$('ul').hide();
$('p.A').hide();
$('p.V').click(function(){
$(this).next('ul').slideDown('slow');
$(this).hide();
$(this).closest('p.A').show(); // <-- How do I select 'p.A' in the current div?
});
http://jsfiddle.net/S8xcz/7/
This works great up until 'p.V' is hidden. From there, I need to display the 'p.A' (the 'up arrow').
How do I navigate to this?
I'm assuming that hidden elements are still navigable - is this correct?
The closest method goes up the DOM tree to find an ancestor, you probably want to use nextAll('p.A').
http://jsfiddle.net/ambiguous/pWDth/
Or parent() and find(): $(this).parent().find('p.A').show();
http://jsfiddle.net/ambiguous/pWDth/1/
Or perhaps siblings: $(this).siblings('p.A').show();
http://jsfiddle.net/ambiguous/pWDth/2/
I'd probably use $(this).parent().find('p.A') as that's the least sensitive to how the HTML is arranged.
Replace
$(this).closest('p.A').show();
with
$(this).siblings('p.A:first').show();