We Keep Coding

Bootstrap panel in a panel: Both glyphicons toggle when inner panel is clicked

I have a bootstrap panel with another panel in it. Both have in the panel header a glyphicon. The panels are collapsed by default. When the panels are collapsed, the glyphicon-unchecked is set. When I click on this glyphicon, the panel uncollapses. I wrote following JavaScript function for this:
$('#outerPanelGlyph').click(function () {
$('#outerPanelBody').collapse('toggle');
});
This works properly. When I click this, the outer panel gets uncollapsed but the inner is still collapsed. I wrote methods, so the glyphicon gets exchanged with "glyphicon-check" on uncollapse and vice versa:
$('#outerPanelBody').on('show.bs.collapse', function () {
$('#outerPanelGlyph').removeClass("glyphicon-unchecked").addClass("glyphicon-check");
});
$('#outerPanelBody').on('hide.bs.collapse', function () {
$('#outerPanelGlyph').removeClass("glyphicon-check").addClass("glyphicon-unchecked");
});
I wrote exactly the same code as above for the inner panel. When I click on the glyph of the inner panel, the inner panel gets uncollapsed and the glyph exchanged. But, when I click on the glyph of the inner panel again, the inner panel collapses and both the glyph of the inner panel and of the outer panel get exchanged. I just want the inner panel glyph exchanged when I click on the glyphicon of the inner panel.
Here is the HTML-Code:
<div class="panel panel-dark" id="outerPanel">
<div class="panel-heading">
<span class="pull-right"><i class="glyphicon glyphicon-unchecked" id="outerPanelGlyph"></i></span>
</div>
....some code....
<div class="collapse panel-body" id="outerPanelBody">
<div class="panel panel-default" id="innerPanel">
<div class="panel-heading panel-dark">
<span class="pull-right"><i class="glyphicon glyphicon-unchecked" id="innerPanelGlyph"></i></span>
</div>
<div class="collapse panel-body" id="innerPanelBody">
....some code....
</div>
</div>
</div>
</div>

When you click the inner panel, you also click the outer panel so you need to stop propagation in the inner panel click event otherwise both events will be fired.
$('#outerPanelBody').on('show.bs.collapse', function (e) {
e.stopPropagation();
$('#outerPanelGlyph').removeClass("glyphicon-unchecked").addClass("glyphicon-check");
});
$('#outerPanelBody').on('hide.bs.collapse', function (e) {
e.stopPropagation();
$('#outerPanelGlyph').removeClass("glyphicon-check").addClass("glyphicon-unchecked");
});

The answer from Steve Harris does work, but he wrote it in the wrong method. Here are my new methods which toggle the glyph:
$('#outerPanelBody').on('show.bs.collapse', function (e) {
e.stopPropagation();
$('#outerPanelGlyph').removeClass("glyphicon-unchecked").addClass("glyphicon-check");
});
$('#outerPanelBody').on('hide.bs.collapse', function (e) {
e.stopPropagation();
$('#outerPanelGlyph').removeClass("glyphicon-check").addClass("glyphicon-unchecked");
});
Thank you very much for the fast help!

How to solve opening & closing div bootstrap issue?

I'm rendering with handlebars a list of items and I'm using bootstrap to create a toggle div for every item. Handlebars works fine and also the toggle but not the closing-div function of bootstrap.
(I've already try to use bootstrap accordion but it was not working, so I would like solve the problem using jQuery)
Every time I open a new div it should close the other one (if there is one already open); This is not working, I can open more than one panel for time.
<section id="list-wrap">
<script id="list-items" type="text/x-handlebars-template">
{{#each cards}}
<div class="panel">
<div class="panel-heading grad">
<h4>
<span class="title-style">{{name}}</span>
<a data-toggle="collapse" href="#{{this.code}}">
<i class="chevron_toggleable indicator glyphicon glyphicon-chevron-right pull-left"></i>
</a>
<p class="apr title-style"> {{apr}} % APR </p>
</h4>
</div>
<div id="{{this.code}}" class="changeClass panel-collapse collapse">
<div class="panel-body">
<div>
<div class="img-div">
<img src="assets/{{code}}.png">
</div>
<div class="info-div"><p class="info-paragraf">{{information}}</p>
</div>
<div class="cashback-div">
<p class="cashback-paragraf-1">Cashback</p>
<p class="cashback-paragraf-2">{{cashback}}</p>
</div>
</div>
</div>
</div>
</div>
{{/each}}
</script>
</section>
this was working until I added a express server:
$('i').click(function () {
$('.changeClass').removeClass('in');
});

Try using jQuery UIs accordion as an option.
You just have to put the items in an accordion tag, wrap each item in a div as a child of the accordion div and then call the accordion method on the accordion div.
http://jqueryui.com/accordion/

I would use a jquery accordion function like this one. Fiddle
$('#accordion').accordion({
collapsible:true,
beforeActivate: function(event, ui) {
// The accordion believes a panel is being opened
if (ui.newHeader[0]) {
var currHeader = ui.newHeader;
var currContent = currHeader.next('.ui-accordion-content');
// The accordion believes a panel is being closed
} else {
var currHeader = ui.oldHeader;
var currContent = currHeader.next('.ui-accordion-content');
}
// Since we've changed the default behavior, this detects the actual status
var isPanelSelected = currHeader.attr('aria-selected') == 'true';
// Toggle the panel's header
currHeader.toggleClass('ui-corner-all',isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top',!isPanelSelected).attr('aria-selected',((!isPanelSelected).toString()));
// Toggle the panel's icon
currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e',isPanelSelected).toggleClass('ui-icon-triangle-1-s',!isPanelSelected);
// Toggle the panel's content
currContent.toggleClass('accordion-content-active',!isPanelSelected)
if (isPanelSelected) { currContent.slideUp(); } else { currContent.slideDown(); }
return false; // Cancels the default action
}
});

Javascript stopping scroll from jumping

I have a page where you can click to slideDown an element from the top of the page.
I am trying to create a rule that says if the push down is visible and the screen has scrolled further than the height of the push down then it should be hidden again. Meaning the user will have to push the button to get it to show again.
In my HTML I have:
<div class="row" id="learn-more" style="display:none">
<div class="small-12 columns" id="close">
<p id="close-learn">
<i class="fa fa-times pull-right fa-2x"></i>
</p>
</div>
<div class="small-12 columns" id="learn-content">
<h1>Content for Pushdown</h1>
</div>
</div>
<div class="row" id="hero">
<div class="small-12 columns small-centered">
<p id="learn"><a class="transition">Learn More</a></p>
</div>
</div>
In my Javascript I have:
// Open and close learn more section
$("#learn").on("click", function() {
$("#learn-more").slideDown();
});
$("#close-learn").on("click", function() {
$("#learn-more").slideUp();
});
// Close learn-more based on scroll position
$(window).on("scroll", function() {
var scrollPosition = $(window).scrollTop();
if ($("#learn-more").is(":visible") && scrollPosition > $("#learn-more").height()) {
$("#learn-more").slideUp()
}
});
This all works but when the #learn-more element slides up the page jumps down about 500 pixels which is the height of the #learn-more element. I would like mine to work in the same way as Airbnb's new homepage when you click the 'how it works' button and then scroll below the push down element.
Any advice would be much appreciated.

Seems that this situation occurs because $(window).scrollTop position is preserved after the the slideUp() is called.
But we can memorize the visible position of Learn More button relative to the top of the window and after text block is hidden return to this position. Also, i suggest to use hide() instead of slideUp() here.
Here is what I suggest to do on scroll:
$(window).on("scroll", function(event) {
var scrollPosition = $(window).scrollTop();
var learnMore = $("#learn-more");
if (learnMore.is(":visible") && scrollPosition > learnMore.height()) {
var learnMoreButtonTop = $("#learn").offset().top - scrollPosition;
learnMore.hide();
$(window).scrollTop(learnMoreButtonTop);
}
});
Working example

Divs cannot be made visible

I have a overlay page where I have one parent div and children div like this
<div id="completeBlock" style="display:block">
<div id="id1" style="display:block">
This is div one
</div>
<div id="id2" style="display:none">
This is div two
</div>
<div id="id3" style="display:none">
This is div three
</div>
</div>
and separate links to show the divs
<a onclick=doChangeDiv(id1)>link one</a>
<a onclick=doChangeDiv(id2)>link two</a>
<a onclick=doChangeDiv(id3)>link three</a>
My aim is to show one div at a time and make others none.It works fine in all browsers but in firefox
it works for the very first time I open the page.If I close the page and open it again,
the hidden divs cannot be made visible and I got an error "TypeError: can't access dead object"
My jquery script is
function doChangeDiv(fromId){
$('#completeBlock').children().each(function() {
if($(this).css('display') != 'none')
{
var hideId = '#'+$(this).attr('id');
$(hideId).hide();
}
});
$(fromId).attr('display','block');
$(fromId).show();
}
Please help me to sort out this problem.

See this : http://jsfiddle.net/uD9mU/1/
$(document).ready(function () {
$('a').click(function (e) {
e.preventDefault();
var fromId = $(this).attr("data");
//alert(fromId);
$('#completeBlock').children().hide().filter('#'+fromId).fadeIn('slow');
});
});

how can I remove the subnavigation overlap?

I am trying to create a sub navigation. Right now I have two subnav. When i hover over the first item on the main menu the corresponding submenu appears. But when I hover over the second item the second sub nav appears OVER the first one. How can I write the code so that this does not happen?
url: http://arabic001.com
$(document).ready(function() {
$('#arbNavText01').mouseover(function() {
$('#subNav01').show('slow');
});
$('#subNav01').mouseleave(function() {
$('#subNav01').hide('slow');
});
$('#arbNavText02').mouseover(function() {
$('#subNav02').show('slow');
});
$('#subNav02').mouseleave(function() {
$('#subNav02').hide('slow');
});
})
I just tried the below suggestion from Scott and I am not able to show and hide the submenu on hover. Any ideas of how to solve this problem? Here are my new codes:
html
<div id="menu01" class="menu_item">
<div id="engNavText01">Alphabet</div>
<div id="arbNavText01">الأحرف</div>
<div id="subNav01" style="display:none;">
<a href="colors" class="subNav">
<span style="font-size:26px; cursor:pointer;">قراءة</span</a>
<br>reading<br><br>
</div>
</div>
<div id="menu02" class="menu_item">
<div id="engNavText02">Numbers</div>
<div id="arbNavText02">الأحرف</div>
<div id="subNav02" style="display: none; ">
<a href="colors" class="subNav">
<span style="font-size:26px; cursor:pointer;">قراءة</span</a>
<br>reading<br><br>
</div>
</div>
and the JS
$(document).ready(function() {
$('.menu_item').children().hover(
function(){
$subNav = $(this).parents('menu_item').children("div[id^='subNav'");
if ($subNav.css('display', 'none')){
$subNav.show('slow');
}
},
function(){
$(this).parents('menu_item').children("div[id^='subNav'").hide('slow');
});
})

You've created a mouseleave event, but you've only attached it to the submenu. So in order to make a menu disappear, the user will have to hover over the submenu and then move out. You could achieve what you want by hiding other submenus before opening a new one. So keeping your mouseleave events as you have them, you could modify your 2 mouseover events to this:
$('#arbNavText01').mouseover(function() {
$('#subNav02').hide('slow');
$('#subNav01').show('slow');
});
$('#arbNavText02').mouseover(function() {
$('#subNav01').hide('slow');
$('#subNav02').show('slow');
});
Edit for comment:
I was thinking about that when I went and looked at your page originally. I think if you used a slightly different structure in your html this could be done. Right now your menu divs aren't clearly structurally related to each other so maybe add a div that can contain the 3 elements associated with each menu item.
I'm going to spit ball an idea, it may not even work let alone be the best way.
<div id="menu01" class="menu_item">
<div id="engNavText01">Alphabet</div>
<div id="arbNavText01">الأحرف</div>
<div id="subNav01" style="display: none; ">
<span style="font-size:26px; cursor:pointer;">قراءة</span
<br>reading<br><br>
</div>
</div>
<div id="menu02" class="menu_item">...
Edited JS, I think now it could work
$('.menu_item').hover(
function(){
$subNav = $(this).children("div[id^='subNav']");
if ($subNav.css('display', 'none')){
$subNav.show('slow');
}
},
function(){
$(this).children("div[id^='subNav']").hide('slow');
}
);
Was trying it out with a JSFiddle, seems alright there. Might need some modification for your uses.