We Keep Coding

How to prevent Kendo Panelbar from collapsing when I click button which is places on the panelbar itself

I have a button which is placed on Kendo Panelbar. I was writing a jQuery function so that when user clicks on the button panelbar does not collapse. Other logic that I put on is that there is no post-back when button is clicked. I can't get this to work. Help appreciated ! :) Here is the code snippet.
$("#panelBarCarDetails").kendoPanelBar({
expandMode: "multiple"
$('#btnTakeOwnership').click(function (e) {
if (e.target) {
e.preventDefault();
}
});

I managed to find a solution for your problem by creating a boolean variable that represents the possibility to expand or collapse the panelBar. When you click the button, it will "lock" the panel.
Then, on expand or collapse events, it will check this variable's value and preventDefault or not depending on it.
Here's a fiddle
var canExpandCollapse = true;
$(document).ready(function () {
$("#panelbar").kendoPanelBar({
expandMode: "multiple",
collapse: cancelExpandCollapse,
expand: cancelExpandCollapse
});
});
function cancelExpandCollapse(e) {
if (!canExpandCollapse) {
e.preventDefault();
canExpandCollapse = true;
}
}
$("#wu").click(function (e) {
canExpandCollapse = false;
});
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.805/styles/kendo.common-fiori.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.805/styles/kendo.fiori.min.css" />
<script src="//kendo.cdn.telerik.com/2015.2.805/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js"></script>
<div id="example">
<ul id="panelbar">
<li> <span class="k-link k-state-selected">My Teammates</span>
<br/>
<p>Some trash here</p>
<p>Some trash here</p>
<br/>
<br/>
</li>
<li id="">Projects
<button id="wu">Click me, I won't expand/collapse</button>
<ul>
<li>New Business Plan</li>
<li>Sales Forecasts
<ul>
<li>Q1 Forecast</li>
<li>Q2 Forecast</li>
<li>Q3 Forecast</li>
<li>Q4 Forecast</li>
</ul>
</li>
<li>Sales Reports</li>
</ul>
</li>
<li>Programs
<ul>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
<li>Thursday</li>
<li>Friday</li>
</ul>
</li>
<li>Communication</li>
</ul>
</div>

Return false form your button click event handler function.
$('#btnTakeOwnership').click(function (e) {
if (e.target) {
e.preventDefault();
}
return false;
});
Changed fiddle from chiapas answer

I am trying to hide show menu from an <a><img> with jquery

I am trying to show the .list-menu div show on click and then hide on click when the .hamburger anchor is clicked. Right now nothing is happening.
$('document').ready(function() {
$(".list-menu").hide();
$( ".hamburger" ).click(function() {
$( ".list-menu" ).show() {
});
$( ".hamburger" ).click(function() {
$( ".list-menu" ).hide() {
});
});
});
<div class="logo">
<div class="about-me-button">
<img src="/img/menu.svg" alt="hamburger menu">
</div>
<div class="list-menu">
<ul>
<li>About Me</li>
<li>Resume</li>
<li>Contact</li>
</ul>
</div>
</div>

There is a function named .toggle() that "display or hide the matched elements" and you need only 1 .click() event.
$('document').ready(function() {
$(".list-menu").hide();
$(".hamburger").click(function() {
$(".list-menu").toggle();
});
});
$('document').ready(function() {
$(".list-menu").hide();
$(".hamburger").click(function() {
$(".list-menu").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="logo">
<div class="about-me-button">
<a href="#" class="hamburger">
<img src="/img/menu.svg" alt="hamburger menu">
</a>
</div>
<div class="list-menu">
<ul>
<li>About Me
</li>
<li>Resume
</li>
<li>Contact
</li>
</ul>
</div>
</div>

$(function() {
$(".list-menu").hide();
$( ".hamburger" ).click(function() {
$( ".list-menu" ).toggle();
});
});

I think the easiest way would be is the use jquery .toggle() method.
$(".list-menu").hide();
//toggle way
$(".hamburger").click(function () {
$(".list-menu").toggle();
});
or if you would like to go an alternative route you can try something like this
//jquery alternative to toggle
var toggle = false;
$(".hamburger").click(function () {
if (!toggle) {
$(".list-menu").show();
toggle = true
} else {
$(".list-menu").hide();
toggle = false
}
});
I created a fiddle so that you can see how both would work.
https://jsfiddle.net/maenucze/

How to fadeOut div inside content div

Hello all I've this script and I want when I click .content div fade $('.d-menu') element, but when I click .d-menu not work good, it fadeIn and fadeOut very fast :(
p.s.
.content is main div
http://jsfiddle.net/valeri879/abn8x46n/
<div class="f-menu"></div >
<div class="d-menu">
<ul>
<li>about</li>
<li>projects</li>
<li>help</li>
</ul>
</div>
$(document.body).on('click','.f-menu',function(){
$('.d-menu').fadeToggle(200);
});
$(document.body).on('click','.content',function (){
$('.d-menu').fadeOut();
})

See the answer below
use event.stopPropagation();
<div class="content" style="width:500px; height:500px; background:#ccc;">
<div class="f-menu">asdasdasd</div>
<div class="d-menu">
<ul>
<li>about</li>
<li>projects</li>
<li>help</li>
</ul>
</div>
</div>
<script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(document.body).on('click', '.f-menu', function (event) {
event.stopPropagation();
$('.d-menu').fadeToggle(200);
});
$(document.body).on('click', '.content', function (event) {
event.stopPropagation();
$('.d-menu').fadeOut(200);
});
$(document.body).on('click', '.d-menu', function (event) {
event.stopPropagation();
});
});
</script>
Hope this helps

Why can't I target li element with jQuery.click()?

I have this html:
<ul id="ul_places_list">
<li data-placesCode="6">
<a class="places_dtl" href="#">
<div>
<img src="http://dev.mysite.it/images/9_1418893365.jpg">
</div>
<label>Coming Out</label>
</a>
</li>
<li data-placesCode="8">
<a class="places_dtl" href="#">
<div>
<img src="http://dev.mysite.it/images/9_1418893594.jpg">
</div>
<label>Friends</label>
</a>
</li>
</ul>
and this javascript
$(document).delegate('a','click',function(){//used to switch page
console.log('delegate executed');
var a = $(this);
if(a.attr('href') != '#'){
event.preventDefault();
toPage(a.attr('href'));
}
});
$(document).ready(function(){
$('#ul_places_list li').click(function(){
var code = $(this).attr('data-placesCode');
console.log('code is: ' +code);
});
});
The problem is that when I click on list element only the delegated click on the element fires and not the event on the "li" element.
The "li" elements are added after an Ajax call.
What's going? What am I missing?

This )}; was the problem. Should be this });.
$(document).delegate('a','click',function(){//used to switch page
console.log('delegate executed');
var a = $(this);
if(a.attr('href') != '#'){
event.preventDefault();
toPage(a.attr('href'));
}
});
$(document).ready(function(){
$('#ul_places_list li').click(function(){
var code = $(this).attr('data-placesCode');
console.log('code is: ' +code);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<ul id="ul_places_list">
<li data-placesCode="6">
<a class="places_dtl" href="#">
<div>
<img src="http://dev.mysite.it/images/9_1418893365.jpg">
</div>
<label>Coming Out</label>
</a>
</li>
<li data-placesCode="8">
<a class="places_dtl" href="#">
<div>
<img src="http://dev.mysite.it/images/9_1418893594.jpg">
</div>
<label>Friends</label>
</a>
</li>
</ul>

The below answer actually is just a different implementation of your code.
The real answer is
This )}; was the problem. Should be this });.
From the other answer: https://stackoverflow.com/a/27571915/561731
But you really should be using .on in new code :-)
Old answer:
Try using .on
So you can do:
$(document).on('click', 'a', function () {
//event for anchor tag
});
$(function () {
$('#ul_places_list').on('click', 'li', function () {
//stuff for li click event
});
});

if you add the "li" elements in a AJAX call you should add the click event after the elements load. Add this when ajax call end:
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(addEventToControls)
function addEventToControls()
{
$('#ul_places_list li').click(function(){
var code = $(this).attr('data-placesCode');
console.log('code is: ' +code);
});
}
The add_endRequest Manager fire the handler when a Ajax Call end.

Show content on hover

<div id="side">
<h2 class="1">1</h2>
<h2 class="2">2</h2>
<ul>
<li><a class="3"href="">3</a></li>
<li><a class="4" href="">4</a></li>
</ul>
</div>
What would the code be so when I hover over an <a> it will display the <h2>? So .3 would display .1?
This is what I've tried so far:
<script type="text/javascript">
$(document).ready(function() {
$("#side a").hover(
function() {
$(this).children('.h2').show();
},
function() {
$(this).children('h2').hide();
}
);
});
</script>

This is an example for your test case, you should improve it for your live app.
JSFiddle link: click here
$(document).ready(function(){
$("#side h2").hide();
$("#side ul li a").mouseover(function() {
if($(this).hasClass("3")) {
$("#side h2.1").show();
} else if($(this).hasClass("4")) {
$("#side h2.2").show();
}
}).mouseout(function() {
if($(this).hasClass("3")) {
$("#side h2.1").hide();
} else if($(this).hasClass("4")) {
$("#side h2.2").hide();
}
});
})
JSFiddle link: click here

<style>
.1{
display: none;
}
</style>
<script>
document.querySelector('.3').onmouseover = function(){
document.querySelector('.1').style.display = 'block';
};
document.querySelector('.3').onmouseout = function(){
document.querySelector('.1').style.display = 'none';
};
</script>
<div id="side">
<h2 class="1">1</h2>
<h2 class="2">2</h2>
<ul>
<li><a class="3" href="">3</a></li>
<li><a class="4" href="">4</a></li>
</ul>
</div>
Instead of document.querySelector('.3') you can use document.getElementsByClassName('3')[0]

You are gonna use eq()
If I understood it right, you need your first item from your ul, open the first header. the second item, open the second header, etc.
eq() Get the supplied index that identifies the position of this element in the set.
Here is the Fiddle
HTML
<div id="side">
<h2 class="1">1</h2>
<h2 class="2">2</h2>
<ul>
<li><a class="3" href="#">3</a></li>
<li><a class="4" href="#">4</a></li>
</ul>
</div>​
jQuery
$(document).ready(function(){
$('#side a').on('click', function(){
var index = $('#side a').index(this);
// alert(index);
alert($('#side h2').eq(index).html());
});
});
​
NOTE: Difference between eq and :nth-child
EIDT: as you ask for hover, you can do this.
$(document).ready(function(){
$('#side a').on('hover', function(){
var index = $('#side a').index(this);
// alert(index);
// alert($('#side h2').eq(index).html());
$('#side h2').eq(index).toggle();
});
});

<div id="side">
<h2 class="one">What Have You Tried?</h2>
<h2 class="two">2</h2>
<ul>
<li><a class="three"href="">3</a></li>
<li><a class="four" href="">4</a></li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#side a").hover(
function() {
$("#side").find('.one').show();
},
function() {
$("#side").find('.one').hide();
}
);
});
</script>
http://jsfiddle.net/VdFxf/1/