We Keep Coding

button to open specific accordion tab

i'm trying to create a button or link that opens a specific accordion tab, here is my accordion structure:
<div class="tabs">
<div class="tabs-header">
<div class="border"></div>
<ul>
<li class="active">Home</li>
LINK HERE to open Tab 2
LINK HERE to open Tab 3
<li>Symptom Checker</li>
<li>Locator</li>
</ul>
</div>
<div class="tabs-content">
<div tab-id="1" class="tab active"></div>
<div tab-id="2" class="tab"></div>
<div tab-id="3" class="tab"></div>
</div>
I'm guessing there will be a onclick event I can apply to a button? i've tried:
Symptom Checker
but nothing happens other than updating the URL

you can use
$('your_button').on('click',function(){
$( "#accordion" ).accordion( "option", "active", 1 );
});
for tab2 and
$('your_button').on('click',$( "#accordion" ).accordion( "option", "active", 2 );})
for tab3
or you can use onclick property
<a onclick="$( '#accordion' ).accordion( 'option', 'active', 1 )">Click here for tab2</a>
See a working demo here.
source http://api.jqueryui.com/accordion/#option-active

How to change sortable element's style while dragging?

Here is my script:
<script>
$(function() {
t1 = window.performance.now()
var $sortable1 = $( "#dragableElement" ).sortable({
connectWith: ".connectedSortable",
items: ".sorting-initialize",
containment: "window"
});
$sortable1.find(".ui-state-default").one("mouseenter",function(){
$(this).addClass("sorting-initialize");
$sortable1.sortable('refresh');
});
t2 = window.performance.now()
console.log(t2-t1)
});
</script>
Is it possible to change styling of dragged item in this script? For example add background : 'yellow' and it changes color and etc.?

you can also use jQueryUi sortable events start for this try this:-
$( "#dragableElement" ).sortable({
connectWith: ".connectedSortable",
items: ".sorting-initialize",
containment: "window",
start: function( event, ui ) {
$(ui.item).addClass("yellow");
},
stop:function( event, ui ) {
$(ui.item).removeClass("yellow");
}
});
Demo

When you sort an item, a class ui-sortable-helper is added to the item. You can use this class to change the appearance of the item being sorted. You can then use CSS rules to alter the appearance of this item. However, you have to ensure that your css overrides the default css of jQuery UI. For that, you may need to have very specific selectors.
Demo: http://jsfiddle.net/UAcC7/1503/
CSS:
.ui-sortable-helper {
background:green;
}
HTML:
<div class="demo">
<ul id="sortable">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
</div>
<!-- End demo -->
<div class="demo-description" style="display: none; ">
<p>Enable a group of DOM elements to be sortable. Click on and drag an element to a new spot within the list, and the other items will adjust to fit. By default, sortable items share <code>draggable</code> properties.</p>
</div>
<!-- End demo-description -->
JS:
$("#sortable").sortable();

JQuery get id of selected tab does not work

I have tried a lot of examples done and I cannot get my code to work to get the ID of a selected tab
http://pastebin.com/A5cqQS61
js code:
$(function() {
$('#tabs').tabs({
select: function(event, ui) {
console.log($(ui.tab)); // the tab selected
console.log(ui.index);
},
show: function(event, ui) {
console.log($(ui.tab)); // the tab shown
console.log(ui.index);
}
});
});
HTML:
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<p>text1</p>
</div>
<div id="tabs-2">
<p>text2</p>
</div>
<div id="tabs-3">
<p>text3</p>
</div>
</div>
I put in pastebin, because I don't understand ow the code block works in stack! I've pressed space four times, never seems to work well.
I have looked at these solutions so far:
jquery tab selected
jQuery tabs - Get the index of previously selected tab
jQuery tabs - Get the index of previously selected tab
Get tab selected Id in jQuery UI 1.9

You should use ui.panel , returning div tab element: {if it's what you are looking for?}
SEE DEMO
$(function () {
$('#tabs').tabs({
select: function (event, ui) {
console.log(ui.panel.id);
console.log(ui.index);
},
show: function (event, ui) {
console.log($(ui.panel));//jq object
console.log(ui.panel.id);
console.log(ui.index);
}
});
});

Please, try this one — note the different event name('activate') and usage of different property of ui object:
$(function() {
$('#tabs').tabs({
activate: function(event, ui) {
console.log(ui.newPanel[0].id);
}});
});

I usually do the bootleg way... $('#tabs li.active'). This will give you the active li under the element with id='tabs'. If you can get the element, also... jQuery allows you do something like this... $(element).
From there you can do var ID=$(element.attr('id');

jQuery - Non-nested / non-descendant sibling navigation shown on hover event

I have 2 navigation areas. The second should appear when an element in the first is hovered over and it should disappear if the mouse does not move over it.
Very basically i have:
HTML
<ul class="main">
<li class="1">item 1</li>
<li class="2">item 2</li>
</ul>
<div class="sub">
<ul class="1">
<li>1 sub item 1</li>
<li>1 sub item 2</li>
</ul>
<ul class="2">
<li>2 sub item 1</li>
<li>2 sub item 2</li>
</ul>
</div>
I want ul.1 to appear when I hover over li.1 and ul.2 to appear when I hover over li.2, and I want them both to disappear only when I am not hovering over the sub uls.
I've got it working part way:
JAVASCRIPT
var sections = new Array('1', '2');
$.each(sections, function(i, section) {
$('ul.main li.' + section).hover(
function() {
$('div.sub ul').hide();
$('div.sub ul.' + section).show();
}
);
});
This will show the correct section and hide the others, but I can't figure out how what I need so that, when the mouse moves off a ul.main li, the .sub ul disappears if it's not being hovered over.
Update: Fiddle here: http://jsfiddle.net/alluvialplains/XY4mH/

You're part of the way there #EpF. The problem is that your semantic example given above (which is possible to adhere to) is trying to capture a mouseleave event and while it's possible to use jQuery's .not() function to achieve this, it would be expensive. Really, the smartest way to do this is to have an outer wrapper for your whole navigation (wrapping all div's you've got in your existing fiddle) and then bind your show() event to mouseenter, while separately binding your .hide() event (the one for ALL .subz) to an event triggered on mouseleave for the wrapper div.
Given the following HTML:
<div id="nav-wrap">
<ul class="mainz">
<li class="1">item 1</li>
<li class="2">item 2</li>
</ul>
<div class="subz">
<ul class="1">
<li>1 sub item 1</li>
<li>1 sub item 2</li>
</ul>
<ul class="2">
<li>2 sub item 1</li>
<li>2 sub item 2</li>
</ul>
</div>
</div><!-- /END #nav-wrap -->
You can achieve the effect with the following javascript
$( document ).ready( function () {
var $ul = $( '.subz ul' ).hide();
$( '.mainz li' ).on( 'mouseenter', function(event){
$ul.hide().eq( $( this ).index() ).show();
});
$( '#nav-wrap' ).on( 'mouseleave', function(event){
$ul.hide();
});
});
Here is a JSFiddle of it in action: http://jsfiddle.net/XY4mH/4/
Also, I should note that the .hover() function is deprecated in jQuery for quite a while now and could disappear sometime soon. Note that I used the .on() function, which is the correct way to bind these kinds of events in jQuery.

$( document ).ready( function () {
$( '.main li' ).on( 'click', function () {
$( '.sub ul' )
.hide()
.eq( $( this ).index() )
.show();
});
});
That should do the trick. But as #Mottie said, nesting menus would work better / more symantecly
Edit: Sorry this is working on click. Just a sec and I'll have it updated
$( document ).ready( function () {
var $ul = $( '.sub ul' ).hide();
$( '.main li' ).hover(
function () {
$ul
.hide()
.eq( $( this ).index() )
.show();
},
function () {
$ul.hide()
}
);
});

Jquery list drag drop

I have a Jquery Drag Drop List which I want to update immediately in MYSQL using Jquery Ajax Post.
Because I can drag elements between lists (more than one list), I need to get the parent ID (parent being list category ID - where the draggable is dragged to)
When I drag from one category / list to another I am always given the former ID..
For example:
CAT 1 ------------ CAT 2
If I was to drag something from CAT1 to CAT2 - the ID would be CAT1 and not the new category ID...
I have added my codes below:
Jquery:
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.ui.core.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.ui.mouse.js"></script>
<script src="js/jquery.ui.sortable.js"></script>
<script>
$(function() {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".mouseup").mouseleave(function(){
var sparent = $(this).parent().attr("id");
alert(sparent);
});
});
</script>
LIST HTML:
<div class="demo">
<div class="box">
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default mouseup">Item 1</li>
<li class="ui-state-default mouseup">Item 2</li>
</ul>
</div>
<div class="box">
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-highlight mouseup">Item 1</li>
<li class="ui-state-highlight mouseup">Item 2</li>
</ul>
</div>
</div>
Any help would be appreciated.
Thank you in advance!

What you want is here:
http://jqueryui.com/demos/draggable/#events
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable",
stop: function(event, ui) { alert($(ui.item).parent().attr("id") }
}).disableSelection();
Placing your code in the stop callback will allow you check the right ID.

Event that you need to handle is received.
$(".connectedSortable" ).on( "sortreceive", function(event, ui) {
alert(ui.item.parent()[0].id);
// also ui.sender will hold original list, from where element was taken
});
EDITED: depending on the fact if you need to handle case when items were just reordered, ie you drag and drop within same list, or not you are going to use received or stop event.
received will fire only in case you drag to another list.
stop will fire even if you leave item in the same list.