I have the following tabs component:
<a data-tab="tab-1" class="button active">Tab 1</a>
<a data-tab="tab-2" class="button">Tab 2</a>
<a data-tab="tab-3" class="button">Tab 3</a>
<div class="tab-content active" id="tab-1">Tab 1 content</div>
<div class="tab-content" id="tab-2">Tab 2 content</div>
<div class="tab-content" id="tab-3">Tab 3 content</div>
And underneath it I have a select menu:
<select>
<option>Please select</option>
<option value="tab-1">Tab 1</option>
<option value="tab-2">Tab 2</option>
<option value="tab-3">Tab 3</option>
</select>
When you click on the tabs the respective select menu option changes.
What I'm trying to achieve now is to add the class active to the tab buttons when its respective select menu option is chosen and obviously remove that class from the previous tab button.
This is the JS:
$('.button').click(function(){
var tab_id = $(this).attr('data-tab');
$('.button').removeClass('active');
$('.tab-content').removeClass('active');
$(this).addClass('active');
$("#" + tab_id).addClass('active');
$('select').val($(this).data('tab')).change();
})
$("select").change(function () {
$('.tab-content').removeClass('active');
$('#' + $(this).val()).addClass('active');
});
I've tried to add $('.button').addClass('active'); like so:
$("select").change(function () {
$('.tab-content').removeClass('active');
$('#' + $(this).val()).addClass('active');
$('.button').addClass('active');
});
However this adds the class active to every tab button chosen from the select menu.
Please see Demo here
Thank you for your help.
Consider the following code:
$(".button").click(function () {
var tab_id = $(this).attr("data-tab");
$(".button").removeClass("active");
$(".tab-content").removeClass("active");
$(this).addClass("active");
$("#" + tab_id).addClass("active");
$("select").val($(this).data("tab"));
});
$("select").change(function () {
var target = $(this).val();
$(".button[data-tab='" + target + "']").click();
});
You already have the Click event setup, so no need to double your work.
$("select").change(function () {
$('.tab-content').removeClass('active');
$('.button').removeClass('active');
$('#' + $(this).val()).addClass('active');
$('.button[data-tab="'+ $(this).val() +'"]').addClass('active');
});
Native jQuery:
$("select").change(function () {
$('.tab-content').removeClass('active');
$('#' + $(this).val()).addClass('active');
$('.button').removeClass('active');
$('.button').eq($(this).prop('selectedIndex')-1).addClass('active');
});
How it works:
First:
$('.button').removeClass('active') removes class active from all button-class elements.
Second:
$(this).prop('selectedIndex')-1 is the index of the selected element. That way, you add class active only to the exact one selected element.
Related
I have a select menu and some divs associates with it. I want the select menu to hide / show divs according to the select menu value. But if the jQuery didn't find the associative div then it should alert some text.
Here is my code:
$('select').change(function(){
var div = $(this).val();
$('#results div').hide();
$('#' + div).show();
});
#results div {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="div_1">Div 1</option>
<option value="div_2">Div 2</option>
<option value="div_3">Div 3</option>
</select>
<div id="results">
<div id="div_1">Div 1</div>
<div id="div_2">Div 2</div>
</div>
As you can see in my example above there is no DIV 3 so I want an alert saying that there is no DIV 3 found.
Any kind of help appreciated :)
Use length of a jQuery object to check for matches
$('select').change(function() {
var $div = $('#' + $(this).val()).show();
if ($div.length) {
$('#results div').not($div).hide();
} else {
alert('No Match')
}
});
Personally I think this is a bad user experience and a better approach would be to remove or disable <option>s that don't have matches.
$('option').filter(function(){
return !$('#' + this.value).length;
}).remove()// or prop('disabled', true);
check this fiddle
$('select').change(function(){
var div = $(this).val();
$('#results div').hide();
if($('#results').find('#' + div).length > 0){
$('#' + div).show();
} else{
alert("not find")
}
});
I have two elements like:
<select id="data">
<option value=1>hoge</option>
<option value=2>fuga</option>
<option value=3>hogehoge</option>
</select>
hoge
fuga
hogehoge
if I pick hoge on select box, I want data-id="1" to be selected and do some stuff (changing background etc.) using jQuery.
If I click a[data-id="3"], select box option 'hogehoge' to be selected vice versa.
any help would be appreciated.
Have a look at the last line in the click listener. You can trigger a change on an element which will call the corresponding listener instead of duplicating code.
$(function() {
$("#data").on("change", function() {
$("a").removeClass("active"); // remove active class from all <a>
$("a[data-id='" + $(this).val() + "']").addClass("active"); // add active class to link with corresponding data-id
});
$("a").on("click", function() {
$("#data option[value='" + $(this).data("id") + "']").prop("selected", true); // change the selected value
$("#data").trigger("change"); // trigger change on #data to keep active link synced
});
});
.active {
background-color: cornflowerblue;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="data">
<option value=1>hoge</option>
<option value=2>fuga</option>
<option value=3>hogehoge</option>
</select>
hoge
fuga
hogehoge
$(document).ready( function(){
$('a').click(function(){
var id = $(this).data('id');
$('#data').find('option[value='+id+']').prop('selected',true);
)};
)};
I implemented the function in JSFiddle
https://jsfiddle.net/dphf267u/
I have one dropdownlist and 5 panel
I want when the drop down list is changed only one panel show
for panels add css code(display:none;)
now if dropdownlist is changed :value of drop down list compare with one value then one panel show and others panel hide.
My code is:
$(document).ready(function () {
$('#DropDownList1_collection').change(function () {
if ($("#DropDownList1_collection").val() === "abcdef")
$('#Panel1_LavazemElectroniki').show();
});
});
You can add the same conditions for any other conditions to match with.
$('#DropDownList1_collection').change(function () {
if ($("#DropDownList1_collection").val() === "abcdef"){
$('#Panel1_LavazemElectroniki').show();
$('#Panel2_LavazemElectroniki').hide();
$('#Panel3_LavazemElectroniki').hide();
$('#Panel4_LavazemElectroniki').hide();
$('#Panel5_LavazemElectroniki').hide();
}
});
you can do something like this
$('div[class^="drop-"]').hide();
$('select').change(function() {
a = $(this).val();
$('div[class^="drop-"]').hide();
$('.drop-' + a).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="drop-1">dropdown 1</div>
<div class="drop-2">dropdown 2</div>
<div class="drop-3">dropdown 3</div>
Hi I have some javascript which works in a standalone web page with 5 divs, what it does is when an option is selected it will show a div and hide the others based on drop down selection.Basically what the code does is when a sector is selected on the drop down that corresponding DIV will be displayed eg pubs.
The problem I am having is in the web page I want this working on I have lots of Div tags and when the page loads all the Divs on the page are hidden, obviously I don't want this.
Any help would be much appreciated
The code that hides all the divs on page load is
$('div').not(name).hide();
Is there a way of solving this problem I cant see how I am going to get round it at the moment.?
JS
<script>
$(document).ready(function () {
function showTab( name )
{
name = '#' + name;
$('div').not(name).hide();
$(name).show();
}
$('#dropdown').change( function() {
showTab( $( this ).val() );
});
showTab( $('#dropdown').val() );
});
HTML
<form>
<p>
<select id="dropdown" name="dropdown">
<option value="Pub-Chains" selected="selected">Pubs </option>
<option value="Councils">Councils </option>
<option value="Property">Property </option>
<option value="Various">Various </option>
<option value="Universitys">Universitys </option>
</select>
</p>
</form>
My Div's are named like so
Div id="Pub-Chains"
Div id="Councils"
Div id="Property"
Div id="Various"
Div id="Universitys"
You have to group up the div you want to participate in show hide to separate them from other divs on the page. You can assign a common class to them and use that class to hide them.
Div id="Pub-Chains" class="opt"
Div id="Councils" class="opt"
Div id="Property" class="opt"
Div id="Various" class="opt"
Div id="Universitys" class="opt"
$('div.opt').hide();
$(document).ready(function () {
var ddl = $("#dropdown");
$('#' + ddl.val()).show().siblings().hide();
ddl.change(function () {
$('#' + $(this).val()).fadeIn().siblings().hide();
});
});
See demo
If your target <div>s are all siblings then you can easily do something like follows.
<div>
<div id="Pub-Chains">
<div id="Councils">
<div id="Property">
...
</div>
$(function(){
$("select#dropdown").change(function(){
$('#' + $(this).val()).show().siblings().hide();
}).change();
});
See it here.
If you have a more complicated layout then you can think of using classnames to group the <div> elements.
try this:
$(document).ready(function () {
function showTab( name ){
name = '#' + name;
$(name).siblings().hide(); //<-- hide this way
$(name).show();
}
and if this is not working then you can do this just put it outside of doc ready handler
function showTab( name ){
name = '#' + name;
$(name).siblings().hide(); //<-- hide this way
$(name).show();
}
$(document).ready(function () {
// then all your change stuff here
create a parent div to all this div... and call it in selector..
try this
<div id="tabdivs">
Div id="Pub-Chains"
Div id="Councils"
Div id="Property"
Div id="Various"
Div id="Universitys"
</div>
jquery
*updated*
$('#tabdivs').children().not(name).hide();
fiddle here..
I have a dropdownlist:
<select id="ContentList" name="ContentList">
<option value="">Please Select</option>
<option value="TEST_TOP">TEST TOP</option>
</select>
I have a sortable list:
<ul id="sortable">
<li class="ui-state-default">First</li>
<li class="ui-state-default">Second</li>
<li class="ui-state-default">Third</li>
</ul>
I have a button:
<input type="button" value="Add Section" id="btnAdd" class="button"/>
And the following script:
<script type="text/javascript">
$(function() {
$("#sortable").sortable({
placeholder: 'ui-state-highlight'
});
$("#sortable").disableSelection();
$('#btnAdd').click(function() {
});
});
</script>
When a user select something in the dropdown list and clicks Add I want that to get sent to the sortable list as an <li> with the class attribute etc, the dropdown to now show the 'Please Select' option.
Not sure the best approach to take. Thanks
$("#sortable").append("<li class='ui-state-default'>"+
$("#ContentList option:selected").text()+"</li>");
$("#ContentList option:selected").remove();
should do the trick... (:
working demo here
$('#btnAdd').click(function() {
//cache sortable
var $sortable = $("#sortable");
//clone sortables first li, change the text to that of the
//chosen option and append it to the sortable this saves having
//html embedded within the js
$sortable.children().eq(0)
.clone()
.text( $('#ContentList').val() )
.appendTo( $sortable );
// cache select options
var $items = $('#ContentList').children();
//remove selected item
$items.filter(':selected').remove()
//set first option to be selected
$list.eq(0).attr('selected', true);
});