We Keep Coding

Jquery toggle sidebar with 2 buttons

I am trying to create a toggle on a sidebar so that the toggle button opens the sidebar. This works great on desktop, however, if I am using mobile, the toggle button gets hidden. Is it possible to add a close button in the sidebar which can close the sidebar without breaking the script? The script I have is:
<div id="sidebar">content</div>
<div id="filter-icon">Refine Selection <div id="filterswitch"></div></div>
<script>
jQuery(document).ready(function() {
jQuery("#filter-icon").click(function() {
jQuery("#filterswitch").toggleClass('active');
jQuery("#sidebar").toggleClass('show-sidebar');
});
});
</script>

Shouldn't be a problem, have you tried something like this?
<div id="sidebar"><button id="closeSidebar">Close</button></div>
<div id="filter-icon">Refine Selection <div id="filterswitch"></div></div>
<script>
const toggleSidebarAndSwitch = () => {
jQuery("#filterswitch").toggleClass('active');
jQuery("#sidebar").toggleClass('show-sidebar');
}
jQuery(document).ready(() => {
jQuery("#filter-icon").click(() => {
toggleSidebarAndSwitch()
});
jQuery("#closeSidebar").click(()=>{
toggleSidebarAndSwitch()
})
});
</script>

Yes it's possible just add another div in your sidebar like this:
<div id="sidebar">
content
<div class="filterswitch"></div>
</div>
<div id="filter-icon">
Refine Selection
<div class="filterswitch"></div>
</div>
If you ad the class filterswitch to both div's jQuery will automatically listen for clicks on both elements.

Jquery show hide div when click on link

I am trying to show hide div blocks depending on the link on which it click. By default all div will hide. All helps are appreciated.
HTML Code -
<div class="singleFlights">
<div class="itinerarySummary">
<div class="itineraryMenu">
<ul class="list-inline">
<li>Flight itinerary</li>
<li>Fare rules</li>
<li>Baggage Information</li>
</ul>
</div>
<div class="itineraryPanel">
<div id="flight-itinery" class="itineraryPanelItem">
<!-- Content Here -->
</div>
<div id="fare-rules" class="itineraryPanelItem">
<!-- Content Here -->
</div>
<div id="baggage-info" class="itineraryPanelItem">
<!-- Content Here -->
</div>
</div>
</div>
</div>
<div class="singleFlights">
.....................
.....................
</div>
Requirements -
By default 'itineraryPanel' div hide.
If user click on 'Flight itinerary' link under 'itineraryMenu' the div 'itineraryPanel' will show (slide down)with 'itineraryPanelItem' item div. Others div '#fare-rules' and '#baggage-info' will hide. Same will be happen when click on Fare rules and Baggage Information also.
I try with -
$(document).ready(function(){
if($('.flightListing').length > 0){
$('.singleFlights').each(function(){
$('.itineraryMenu ul.list-inline li a').click(function(){
});
});
}
});
I am using bootstrap3. Note that I dont want to show 'itineraryPanel' div until user not click of any link. and after click 2nd time on same link open div slide up and hide.
Here is the live code after included of Vincent G codes - http://45.114.142.104/design//test/cloud/flight-listing-1-n.html

Here's a way to do it with jQuery and data-href elements
See this fiddle
$(function(){
$(".list-inline a").click(function(){
hrefId = $(this).data('href');
$('.itineraryPanelItem').slideUp();
if($(hrefId).is(':visible')){
$(hrefId).slideUp();
}else{
$('.itineraryPanel').show();
$(hrefId).slideDown();
}
});
});
EDIT
With multiples content, you have to use class instead of id
See this updated fiddle
$(function(){
$(".list-inline a").click(function(){
hrefClass = $(this).data('href');
$(this).parents('.singleFlights').find('.itineraryPanelItem').slideUp();
if($(this).parents('.singleFlights').find($(hrefClass)).is(':visible')){
$(this).parents('.singleFlights').find(hrefClass).slideUp();
}else{
$(this).parents('.singleFlights').find('.itineraryPanel').show();
$(this).parents('.singleFlights').find(hrefClass).slideDown();
}
});
});

Push/slide menu from left. Need to hide menu by clicking whole page?

I have found this JSFiddle and I do not know how to fix it, so the user can quit the menu by clicking anywhere in the content instead of only clicking the button. I wan't multiple options, and I can't figure it out?
$(document).ready(function() {
$menuLeft = $('.pushmenu-left');
$nav_list = $('#nav_list');
$nav_list.click(function() {
$(this).toggleClass('active');
$('.pushmenu-push').toggleClass('pushmenu-push-toright');
$menuLeft.toggleClass('pushmenu-open');
});
});
Thank you!

You could catch clicks on the <html/> tag and hide the menu:
$('html').click(function() {
$nav_list.removeClass('active');
$('.pushmenu-push').removeClass('pushmenu-push-toright');
$menuLeft.removeClass('pushmenu-open');
});
This requires stopping event bubbling up, so your first click function has to start with
$nav_list.click(function(e) {
e.stopPropagation();
Whole thing could for sure be optimized, but it should give you a start.
Here is the updated Fiddle.

In the script i have modified the same script to have a toggle function for the content area, the area with the text "Slideout Navigation"
<script type="text/javascript">
$(document).ready(function() {
$menuLeft = $('.pushmenu-left');
$nav_list = $('#nav_list');
$nav_list.click(function() {
$(this).toggleClass('active');
$('.pushmenu-push').toggleClass('pushmenu-push-toright');
$menuLeft.toggleClass('pushmenu-open');
});
});
$(document).ready(function() {
$menuLeft = $('.pushmenu-left');
$content_list = $('#contentpane');
$content_list.click(function() {
$(this).toggleClass('active');
$('.pushmenu-push').toggleClass('pushmenu-push-toright');
$menuLeft.toggleClass('pushmenu-open');
});
});
</script>
The below is the change done to HTML page. I have added a div for the content so clicking on it can be checked through the script
<div class="container">
<div class="main">
<section class="buttonset">
<div id="nav_list">Menu</div>
</section>
<section class="content">
<div id="contentpane">
<h1>Slideout Navigation</h1>
<p>
</p>
</div>
</section><!-- End Content -->
</div><!-- End Main -->
</div><!-- End Container -->

Show a child div when link clicked

I have a series of divs with links and hidden divs. When the link is clicked, I need the hidden div within the parent to be shown. For example:
<div class="track" id="track1">
Song Notes
<div class="song-notes"></div> <!-- HIDDEN DIV TO BE SHOWN WHEN LINK CLICKED -->
</div>
<div class="track" id="track2">
Song Notes
<div class="song-notes"></div> <!-- HIDDEN DIV TO BE SHOWN WHEN LINK CLICKED -->
</div>
So far, the option that I tried opened up ALL of the .song-notes divs, but I want to specify that it's only the child divs of the parent div where the link is contained that should be opened.

I like using .toggle() here.
$('a.notes-link').click(function (){
$(this).next('.song-notes').toggle();
});
jsFiddle example

try this
$(document).ready(function(){
$('.notes-link').click(function(ev){
ev.preventDefault();
$(this).closest('.track').find('.song-notes').show();
});
});
DEMO

You can do this:
$(function () {
$('.notes-link').click(function (e) {
e.preventDefault();
$(this).next().show();
});
});
Demo

$(function () {
$('div.track a.notes-link').click(function (e) {
e.preventDefault();
$(this).next().show(); //$(this).next().toggle();--> to show hide
});
});
.next()
.toggle()

Add id to the hidden divs
<div class="track" id="track1">
Song Notes
<div class="song-notes" style="display:none" id="song1">1</div> <!-- HIDDEN DIV TO BE SHOWN WHEN LINK CLICKED -->
</div>
<div class="track" id="track2">
Song Notes
<div class="song-notes" style="display:none" id="song2">2</div> <!-- HIDDEN DIV TO BE SHOWN WHEN LINK CLICKED -->
</div>
Javascript Code:
function showNotes(id){
$('#song'+id).toggle();
}
Demo:
http://jsfiddle.net/Zz65U/

fire event on tab clicked

i got problem with firing event when one of the tab click... i am using jQuery Easy Tab plugin.... all i want is to display alert when tab with id "#sp_tab2" is clicked... at the movement it fires with all tab and if do like this $("#sp_tab2").click(function(){..}
it doesn't work either... http://os.alfajango.com/easytabs/#advanced-demo
many thanks in advance ...
<div id="selectPropertyTab" class="tab-container">
<ul class="etabs">
<li class="tab tab_description"><img id="tab_description_icon" src="../Icons/property_info_G.png"/>Description</li>
<li class="tab tab_map"><img id="tab_map_icon" src="../Icons/property_map_icon_G.png" />Map</li>
<li class="tab tab_area_kn"><img id="tab_area_kn_icon" src="../Icons/property_direction_icon_G.png" />Area Knowledge</li>
</ul>
<div id="tab_data">
<div id="sp_tab1">
display the property details
</div>
<div id="sp_tab2">
<div id="map_canvas" style="width:61.4em; height:400px;"></div>
</div>
<div id="sp_tab3">
display property area knowledge
</div>
</div> <!--end tab_data-->
</div> <!--end selectPropertyTab-->
jQuery....
$(function () {
$("#selectPropertyTab").easytabs();
});
$("#selectPropertyTab").bind('easytabs:after', function () {
alert("tab no 2 is clicked......");
});

$(function () {
$("#selectPropertyTab").easytabs();
});
$(".tab_map").on("click",function () {
alert("tab no 2 is clicked......");
});
I Hope this will work ! Check this Fiddle

you can have conflict issue if you using .tab_map class somewhere. add id to your li tag
html
<li id="map_canvas_tab" class="tab tab_map"><img id="tab_map_icon" src="../Icons/property_map_icon_G.png" />Map</li>
jquery
$("#map_canvas_tab").on("click", function () {
alert("tab no 2 is clicked....");
});