http://jsfiddle.net/Z9zD8/271/
$(function()
{
$('#toggle1').click(function() {
$('.toggle1').toggle();
return false;
});
$('#toggle2').click(function() {
$('.toggle2').toggle();
return false;
});
$('#toggle3').click(function() {
$('.toggle3').toggle();
return false;
});
$('#toggle4').click(function() {
$('.toggle4').toggle();
return false;
});
});
I would like, which is always open just a Slider.
Say: I have Slider 1 open. When I open Slider 2, then close Slider 1
.
It should always be open only a Slider
I hope you can help me
thank you
The boxes [.toggle1, .toggle2, .toggle3, ..] should have one one class like '.toggle', and remove [#toggle1, #toggle2, #toggle3, ..] on link elements, and try this jQuery code:
$(function() {
$('a').on('click', function(e) {
e.preventDefault();
$('.toggle').slideUp();
$(this).next().next().next('.toggle').slideDown();
});
});
Your html code:
Simple Div Toggle<br /><br />
<div class="toggle" style="display:none; background-color:#4CF;width:100px;height:100px;"></div>
Simple Div Toggle<br /><br />
<div class="toggle" style="display:none; background-color:#4CF;width:100px;height:100px;"></div>
Simple Div Toggle<br /><br />
<div class="toggle" style="display:none; background-color:#4CF;width:100px;height:100px;"></div>
Simple Div Toggle<br /><br />
<div class="toggle" style="display:none; background-color:#4CF;width:100px;height:100px;"></div>
just use this jquery code:
Fiddle DEMO
$("a[id^='toggle']").click(function(){
$('div[class^="toggle"]').slideUp(500);
$("."+$(this).attr("id")).slideToggle(500);
});
Have you looked at the Jquery UI accordion
Accordian
I think you want this behaviour
You might want something like so:
enter link description here
$(function () {
$(".flyout").siblings("span").click(function () {
$(".flyout").slideUp(200, function() {
$(this).siblings(".flyout").toggle(500);
});
$(this).siblings(".flyout").toggle(500);
});
});
<ul>
<li ><span id="europe">Europe</span>
<div class="flyout">
<ul>
<li>item 1</li>
</ul>
</div>
</li>
<li ><span id="europe">Asia</span>
<div class="flyout">
<ul>
<li>item 1</li>
</ul>
</div>
</li>
</ul>
.flyout {display: none}
Related
This is the answer as i was able to solve.
Wanted to change the css class="jsTree-clicked" after the button click event happened from Hyperlink1 to Hyperlink3.
$(document).ready(function () {
//remove Class
$('#myJSTree').find('.jsTree-clicked').removeClass('jsTree-clicked');
//need to do add it to List Item which has Id =3
//check the list item which has id =3 if so add the class to it
// It is not a button click event.
$('#myJSTree li').each(function (i, li) {
console.log('<li> id =' + $(li).attr('id'));
var myIdVal = $(li).attr('id');
if (myIdVal == 3) {
$(this).addClass('jsTree-clicked');
}
});
});
.jsTree-clicked { background-color:red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myJSTree">
<ul class="nav nav-list">
<li id="1">
<a class="jsTree-clicked" title="Hyperlink1">HyperLink1</a>
</li>
<li id="2">
<a title="Hyperlink2">HyperLink2</a>
</li>
<li id="3">
<a title="Hyperlink3">HyperLink3</a>
</li>
</ul>
</div>
When the Hyperlink is clicked the JsTree adds a class="jsTree-clicked" . When you navigate to a different node it will remove and re-add the same class to the navigated node.
Expected
I want a function to remove [class="jsTree-clicked"] for the given List Item based on ID inside the div.
AND
Re-add [class="jsTree-clicked"] to any ListItem by passing the Key i.e ID .
I hope I was able to explain my problem.
Thank you
My JSTree is a third party open source.
$('.nav-list').on('click', 'li', function() {
$('.nav-list li.active').removeClass('active');
$(this).addClass('active');
});
.active{
background-color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myJSTree">
<ul class="nav nav-list">
<li id="1">
<a title="Hyperlink1">HyperLink1</a>
</li>
<li id="2">
<a title="Hyperlink2">HyperLink2</a>
</li>
<li id="3">
<a title="Hyperlink3">HyperLink3</a>
</li>
</ul>
</div>
Maybe this is helpful to you?
$(function () { $('#myJSTree').jstree(); });
const toggle = (e) => {
if (+$("#test").val()>=10 ) {
e.target.classList.remove("jstree-clicked");
console.log("You entered an invalid number.")
}
console.log(e.target)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<div id="myJSTree">
<ul>
<li id="1">
<a title="Hyperlink1" onclick="toggle(event)">HyperLink1</a>
</li>
<li id="2">
<a title="Hyperlink2">HyperLink2</a>
</li>
<li id="3">
<a title="Hyperlink3">HyperLink3</a>
</li>
</ul>
</div>
<input type="text" value="3" id="test"> < 10
I have simply included a rudimentary toggle() function to demonstrate the point of removing and ading the class name "jsTree-clicked". Please note that JStree assigns other classes to the node dynamically that should be kept there.
It appears to me as if the class jstree-clicked (not: jsTree-clicked) is set by JSTree after an element was clicked. You might have to play aroud with this further to get what you want.
The following might be more what you want. It will "link" to the given href only when the predefined test criteria in checkinput() is met:
$(function () { $('#myJSTree').jstree(); });
const checkinput = (e) => {
if (+$("#test").val()>=10 ) {
console.log("You entered an invalid number.")
} else document.location.href=e.target.href;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<div id="myJSTree">
<ul>
<li id="1">
<a title="Hyperlink1" href="https://jsonplaceholder.typicode.com/users/1" onclick="checkinput(event)">HyperLink1</a>
</li>
<li id="2">
<a title="Hyperlink2" href="https://jsonplaceholder.typicode.com/users/2">HyperLink2</a>
</li>
<li id="3">
<a title="Hyperlink3">HyperLink3</a>
</li>
</ul>
</div>
<input type="text" value="3" id="test"> < 10<br>
HyperLink1 will link to the page "user1" if the input is valid, <br>otherwise an eror will be shown in the console.
I have a div class .dropbtn inside my navbar that I wish would run a list drop down function when clicked, but only the text "TOTAL" works onclick.
The <span> and the <i> inside it do not do anything when I click on it, and I need all three elements to be clickable and display the dropdown function. I am using jQuery, but not Bootstrap. Thanks in advance! EDITED.
jQuery('body').on('click', '.dropbtn', function() {
jQuery("#myDropdown").toggleClass("show");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="reservas_right">
<div class="dropdown_reservas nav-item_reservas" id="inner_reservas_right">
<div class="dropbtn">
TOTAL
<br /><span id="totalprice">0,00€</span>
<i class="material-icons">arrow_drop_down</i>
</div>
<div class="dropdown-content_reservas" id="myDropdown">
<ul id="dropul" class="dropul">
<li id="drop1"></li>
<li id="drop2"></li>
<li id="drop3"></li>
<li id="drop4"></li>
<li id="drop5"></li>
<li id="drop6"></li>
</ul>
</div>
</div>
</div>
CSS:
.show{
list-style-type:none;
}
jQuery('body').on('click', '.dropbtn', function(e) {
if(e.target !== this && jQuery(e.target).parent().is(".dropbtn"))
{
jQuery("#myDropdown").toggleClass("show");
} else {
jQuery("#myDropdown").toggleClass("show");
}
});
I'm working on a custom solution, so I thought I would ask the community if anyone has use jQuery Tabs for this purpose before.
The idea is this: I have one main panel, a form with inputs. There are multiple tabs which basically identify different records. All the records will use this form, thats why I just want to load it once, instead of for each tab.
I put a basic example of the direction I want to go. As you can see there are 3 tabs but only one panel. I want to dynamically load content into the_input depending on which tab I click. SO i don't even want to switch the panel, just the selected tab on each click.
I was thinking I need to catch the beforeActivate (http://api.jqueryui.com/tabs/#event-beforeActivate) event, identify which tab was selected, and dynamically alter the 1 visual panel accordingly.
The code isn't really working
jQuery(function($){
$("#tabs").tabs({
beforeActivate(event, ui) {
$('#msg').append('<p>'+ui.newPanel+'</p>');
//I figure what I want to do here is catch the ID of the selected tab, and use that to dynamically load content to the tab.
}
});
function fill_input(selector){
if ( selector == 1 ) {
$('#the_input').val(1);
}else if ( selector == 2 ) {
$('#the_input').val(2);
}else{
$('#the_input').val();
}
}
})
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<div id="tabs">
<ul>
<li>New</li>
<li>record 1</li>
<li>record 2</li>
</ul>
<div id="bol_new">
<form>
<input id="the_input">
</form>
</div>
</div>
<div id="msg">
</div>
You could set the href for each hyperlink to bol_new as under
<ul>
<li>New</li>
<li>record 1</li>
<li>record 2</li>
</ul>
This will set the panel for each tab to the same div with id="bol_new"
Test: https://plnkr.co/edit/EGtCnmNr0c28AaT647SP?p=preview
I would advise just mocking up the tabs with CSS. You can then manipulate the form as needed.
Working example: https://jsfiddle.net/Twisty/j63uvk4q/
HTML
<div id="tabs" class="ui-tabs ui-corner-all ui-widget ui-widget-content">
<ul class="ui-tabs-nav ui-corner-all ui-helper-reset ui-helper-clearfix ui-widget-header">
<li class="ui-tabs-tab ui-corner-top ui-state-default ui-tab ui-tabs-active ui-state-active">
New
</li>
<li class="ui-tabs-tab ui-corner-top ui-state-default ui-tab">
Record 1
</li>
<li class="ui-tabs-tab ui-corner-top ui-state-default ui-tab">
Record 2
</li>
</ul>
<div id="bol_new" class="ui-tabs-panel ui-corner-bottom ui-widget-content">
<form>
Record:
<input id="the_input">
</form>
</div>
</div>
<div id="msg">
</div>
JavaScript
var myData = {
records: {
bol_1: "Homer Simpson",
bol_2: "Marge Simpson"
}
}
$(function() {
$("#tabs .ui-tabs-nav li").click(function(e) {
e.preventDefault();
$("#tabs li.ui-state-active").toggleClass("ui-tabs-active ui-state-active");
$(e.target).parent().addClass("ui-tabs-active ui-state-active");
var id = $(e.target).attr("href").substring(1);
$("#the_input").val(myData.records[id]);
});
$("#tabs .ui-tabs-nav .ui-tabs-tab").hover(function(e) {
$(this).toggleClass("ui-state-hover");
}, function(e) {
$(this).toggleClass("ui-state-hover");
});
});
using JQuery append how to push list values to another div section on button click
For example:
I have two list values
1.Adam
2.Lance
if i click on add button the Adam value should be added to another div section same for lance.. etc
https://jsfiddle.net/oa2hfLum/3/
help me out in achieving it Thanks!
html
<div>
<ol id="sortable">
</ol>
</div>
<div>
<ul id="draggable">
<li>
<div>
<label class='lbl'>
Lance
</label>
<button>Add To Top container</button>
</div>
</li>
<li>
<div>
<label class='lbl'>
Adam
</label>
<button>Add To Top container</button>
</div>
</li>
</ul>
</div>
JQuery
$(document).ready(function() {
$("button").click(function () {
$("#sortable").append('<li></li>');
});
});
You can get the label text using .prev() and .text()
$("button").click(function () {
var label = $(this).prev().text();
$("#sortable").append('<li>'+label+'</li>');
});
JSFiddle demo
I think that you could use this:
$(document).ready(function() {
$("button").click(function () {
$("#sortable").append('<li>'+$(this).prev('label').text()+'</li>');
});
});
Demo: https://jsfiddle.net/oa2hfLum/4/
Change
$("#sortable").append('<li></li>');
to
$("#sortable").append('<li>'+$(this).parent().find('label').html()+'</li>');
On the product page of an ecommerce store I'm trying to switch to another tab based on the click of a hyperlink.
So from a product description, I have a "Read the FAQ" link, that once clicked, I would like to automatically switch to the FAQ tab.
See here: http://www.lifestyleclotheslines.com.au/austral-addaline-35-foldown-clothesline
I tried to replicate the basics of this fiddle but didn't have much luck, I'm sure I was doing something wrong.
$(document).ready(function() {
$('#myTabs').tabs();
$('#showTab1').click(function() {
$('#myTabs').tabs('select', '#tabone');
});
$('#showTab2').click(function() {
$('#myTabs').tabs('select', '#tabtwo');
});
});
http://jsfiddle.net/zEwQz/495/
Any help would be awesome.
Thanks!
<div id="myTabs">
<ul class="tabs">
<li>Tab One</li>
<li>Tab Two</li>
<li>Faq Tab</li>
</ul>
<div id="tabone">You've selected Tab 1</div>
<div id="tabtwo">You've selected Tab 2</div>
<div id="faqtab">You've selected Faq Tab</div>
</div>
Read the FAQ
<input type="button" id="showTab1" value="Show tab 1"/>
<input type="button" id="showTab2" value="Show tab 2"/>
$(document).ready(function() {
$('#myTabs').tabs();
$('#showTab1').click(function() {
$('#myTabs').tabs('select', '#tabone');
});
$('#showTab2').click(function() {
$('#myTabs').tabs('select', '#tabtwo');
});
$('#showFaqTab').click(function() {
$('#myTabs').tabs('select', '#faqtab');
});
});
Not Sure what are you looking for. Please have a look on the updated fiddle
http://jsfiddle.net/zEwQz/500/
You are having same id attribute for both anchor link and the button i.e. (there would be unique ID for an element on the web page)
Read the FAQ
<input type="button" id="showTab2" value="Show tab 2"/>
Try to change it and it will work.
Read the FAQ
<input type="button" id="showTab2" value="Show tab 2"/>
$(document).ready(function() {
$('#myTabs').tabs();
$('#showTab1').click(function() {
$('#myTabs').tabs('select', '#tabone');
});
$('#showTab2').click(function() {
$('#myTabs').tabs('select', '#tabtwo');
});
$('#lnkshowTab2').click(function() {
$('#myTabs').tabs('select', '#tabtwo');
});
});
DEMO