Rectangle 27 8

I have added a CSS class 'action-button' to the button. To hide button in collapsed state use this CSS:

#accordion .action-button {
    float: right;
    display: none;
}
#accordion .ui-state-active .action-button {
    display: inline;
}
$('#accordion .action-button').hover(
    function() {
        $(this).addClass('ui-state-hover');
    },
    function() {
        $(this).removeClass('ui-state-hover');
    }
);

To make the button clickable, use something like this:

$('#accordion .action-button a').click(function () {
    self.location.href = $(this).attr("href");
});

To fix the default and hover states of the button, use this CSS: http://jsfiddle.net/mali303/vf4q0eox/1/

#accordion .action-button .ui-icon {
    background-image: url(http://code.jquery.com/ui/1.9.2/themes/base/images/ui-icons_888888_256x240.png);
}
#accordion .action-button.ui-state-hover .ui-icon {
    background-image: url(http://code.jquery.com/ui/1.9.2/themes/base/images/ui-icons_454545_256x240.png);
}

Hey man, this is looking great!, one remark though the plus sign is black when not focused, and not grey (or darkgrey) (coherent with an unfocused accordion header) It should only be black when focused, is this easy to fix?

I appreciate the work you did on this, this is top notch ! However somehow my website is refusing to give the state .ui-state-hover to the action button, while it is only doing it for the H3 header.. i don't understand this!

@Faarbhurtz Can you provide a link to your website?

The JSfiddle link is broken.. ):

javascript - jQuery Accordion header with jQuery UI icon button (hide/...

javascript jquery html css jquery-ui
Rectangle 27 8

I have added a CSS class 'action-button' to the button. To hide button in collapsed state use this CSS:

#accordion .action-button {
    float: right;
    display: none;
}
#accordion .ui-state-active .action-button {
    display: inline;
}
$('#accordion .action-button').hover(
    function() {
        $(this).addClass('ui-state-hover');
    },
    function() {
        $(this).removeClass('ui-state-hover');
    }
);

To make the button clickable, use something like this:

$('#accordion .action-button a').click(function () {
    self.location.href = $(this).attr("href");
});

To fix the default and hover states of the button, use this CSS: http://jsfiddle.net/mali303/vf4q0eox/1/

#accordion .action-button .ui-icon {
    background-image: url(http://code.jquery.com/ui/1.9.2/themes/base/images/ui-icons_888888_256x240.png);
}
#accordion .action-button.ui-state-hover .ui-icon {
    background-image: url(http://code.jquery.com/ui/1.9.2/themes/base/images/ui-icons_454545_256x240.png);
}

Hey man, this is looking great!, one remark though the plus sign is black when not focused, and not grey (or darkgrey) (coherent with an unfocused accordion header) It should only be black when focused, is this easy to fix?

I appreciate the work you did on this, this is top notch ! However somehow my website is refusing to give the state .ui-state-hover to the action button, while it is only doing it for the H3 header.. i don't understand this!

@Faarbhurtz Can you provide a link to your website?

The JSfiddle link is broken.. ):

javascript - jQuery Accordion header with jQuery UI icon button (hide/...

javascript jquery html css jquery-ui
Rectangle 27 2

you need to go up to the .row, then use nextAll to get the other .row's. then find the div's to hide and then find the button's with in them to remove the class.

then do something similar to show the next div.

$(".div2, .div3, .div4, .div5").hide();

$('button').click(function(){
  $(this).addClass('selected').siblings().removeClass(); 
  $(this).closest('.row').nextAll('.row').find('div').hide().find('button').removeClass('selected');
  $(this).closest('.row').next('.row').find('div').show();
});
.btn {
  color:grey;
}
.selected {
  color:yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-xs-12 div1">
    <button class="btn1 btn"><label for="btn1">Btn1</label></button>
    <button class="btn2 btn"><label for="btn2">Btn2</label></button>
    <button class="btn3 btn"><label for="btn3">Btn3</label></button>
  </div>
</div>
<div class="row">
  <div class="col-xs-12 div2">
    <button class="btn4 btn"><label for="btn4">Btn4</label></button>
    <button class="btn5 btn"><label for="btn5">Btn5</label></button>
    <button class="btn6 btn"><label for="btn6">Btn6</label></button>
  </div>
</div>
<div class="row">
  <div class="col-xs-12 div3">
    <button class="btn7 btn"><label for="btn7">Btn7</label></button>
    <button class="btn8 btn"><label for="btn8">Btn8</label></button>
    <button class="btn9 btn"><label for="btn9">Btn9</label></button>
  </div>
</div>
<div class="row">
  <div class="col-xs-12 div4">
    <button class="btn10 btn"><label for="btn10">Btn10</label></button>
    <button class="btn11 btn"><label for="btn11">Btn11</label></button>
    <button class="btn12 btn"><label for="btn12">Btn12</label></button>
  </div>
</div>
<div class="row">
  <div class="col-xs-12 div5"></div>
</div>

of all my years dabbling with jquery. I never knew of "closest". I feel like a huge idiot. haha. Thank you BG101

javascript - Hide and Show divs below a button selection + class chang...

javascript jquery html css button
Rectangle 27 6

jquery requires you to declare whether the target element is a "class" or an "id" by the denoting symbols "." and "#" respectively

$("#people").click(function(){
  $("#memberswindow").show();
});

also the syntax you are using for the document.ready() call is incorrect, try this as a full solution:

$(document).ready(function(){
    $("#people").click(function(){
      $("#memberswindow").show();
    });
});

it gives me undefined function as an error

the issue is you are calling the onclick="" attributes to your divs which is wholly unnecessary...you can remove the anchor (link) tags around your images. jquery binds the click to the image element so there is no reason to put another html link around it

you can remove the <a> tags entirely. there is no need for them when you are binding a click event to an element with jQuery

javascript - Hiding and showing divs by clicking image - Stack Overflo...

javascript jquery onclick show-hide
Rectangle 27 6

Here's a comparison if I want to apply the same attribute, e.g. hide all elements of class "my-class". This is one reason to use jQuery.

$('.my-class').hide();
var cls = document.querySelectorAll('.my-class');
for (var i = 0; i < cls.length; i++) {
    cls[i].style.display = 'none';
}

With jQuery already so popular, they should have made document.querySelector() behave just like $(). Instead, document.querySelector() only selects the first matching element which makes it only halfway useful.

I would do a .forEach here.

javascript - jQuery vs document.querySelectorAll - Stack Overflow

javascript jquery html
Rectangle 27 8

Create Submenus as much as you want, each one with a unique id and a close button with a class. Place Submenus inside main jQM panel.

  • Submenu HTML structure <div class='ui-sub-panel' id='submenu1'> <div class='ui-header' data-theme='a'> <a href='#' class='ui-btn ui-btn-right ui-btn-icon-notext ui-icon-delete panel-close'>Close</a> <h1 class='ui-title'>Submenu1</h1> </div> <div class="ui-content"> <!-- submenu contents here --> </div> </div>
  • Full height, width and positioned outside page. .ui-sub-panel { width: 100%; position: absolute; top: 0; left: -100%; min-height: 100%; max-height: none; }
.ui-sub-panel-open {
  -moz-transform: translate3d(100%, 0, 0);
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}
.ui-sub-panel-close{
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.ui-sub-panel-animate {
  -webkit-transition: -webkit-transform 500ms ease;
  -moz-transition: -moz-transform 500ms ease;
  transition: transform 500ms ease;
}

Close all submenus once main jQM panel is closed

$("#externalpanel").on("panelbeforeclose", function () {
  $('#submenu1, #submenu2')
      .addClass('ui-sub-panel-close ui-sub-panel-animate')
      .removeClass("ui-sub-panel-open");
});
$('.sub1').on('click', function () {
  $('#submenu1')
      .addClass('ui-sub-panel-open ui-sub-panel-animate')
      .removeClass("ui-sub-panel-close");
});
$('.sub2').on('click', function () {
  $('#submenu2')
     .addClass('ui-sub-panel-open ui-sub-panel-animate')
     .removeClass("ui-sub-panel-close");
});
$('.panel-close').on('click', function () {
  $(this)
     .closest(".ui-sub-panel")
     .addClass('ui-sub-panel-close ui-sub-panel-animate')
     .removeClass("ui-sub-panel-open");
});
data-position="right"
.ui-sub-panel
left
right
.ui-sub-panel {
   ...
   right: -100%;
   ...
}

Is it possible to capture the event of the panelbeforeclose and actually keep the panel open and overlay another panel on top of the existing panel instead of using divs? This solution is a good alternative, but I am just thinking of alternative ways to achieve the soln.

In this case, submenus should be placed outside jQM main panel. They will be hidden once panel is closed. You can keep them open but hidden, they will show once main panel is open. if this is what you want, skip panelbeforeclose part. @Shouvik

so I tried to prevent the panel from closing using the beforeclose event. Unfortunately, I think jquery events are linked for when a panel is open and another needs to be opened, the first needs to be closed. This is probably the reason why i get a stackexceded error.

Perfect! Thanks for your help. Just out of interest, is it possible to remember which panel is open after the overlay is clicked? Of we are at sub panel 2 and click the content area to close all panels, can we have it so clicking the button again will bring us back to the same sub menu panel?

javascript - JQuery Mobile Sliding Panel with nested menu/ multi-level...

javascript jquery jquery-mobile razor panel
Rectangle 27 8

Create Submenus as much as you want, each one with a unique id and a close button with a class. Place Submenus inside main jQM panel.

  • Submenu HTML structure <div class='ui-sub-panel' id='submenu1'> <div class='ui-header' data-theme='a'> <a href='#' class='ui-btn ui-btn-right ui-btn-icon-notext ui-icon-delete panel-close'>Close</a> <h1 class='ui-title'>Submenu1</h1> </div> <div class="ui-content"> <!-- submenu contents here --> </div> </div>
  • Full height, width and positioned outside page. .ui-sub-panel { width: 100%; position: absolute; top: 0; left: -100%; min-height: 100%; max-height: none; }
.ui-sub-panel-open {
  -moz-transform: translate3d(100%, 0, 0);
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}
.ui-sub-panel-close{
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.ui-sub-panel-animate {
  -webkit-transition: -webkit-transform 500ms ease;
  -moz-transition: -moz-transform 500ms ease;
  transition: transform 500ms ease;
}

Close all submenus once main jQM panel is closed

$("#externalpanel").on("panelbeforeclose", function () {
  $('#submenu1, #submenu2')
      .addClass('ui-sub-panel-close ui-sub-panel-animate')
      .removeClass("ui-sub-panel-open");
});
$('.sub1').on('click', function () {
  $('#submenu1')
      .addClass('ui-sub-panel-open ui-sub-panel-animate')
      .removeClass("ui-sub-panel-close");
});
$('.sub2').on('click', function () {
  $('#submenu2')
     .addClass('ui-sub-panel-open ui-sub-panel-animate')
     .removeClass("ui-sub-panel-close");
});
$('.panel-close').on('click', function () {
  $(this)
     .closest(".ui-sub-panel")
     .addClass('ui-sub-panel-close ui-sub-panel-animate')
     .removeClass("ui-sub-panel-open");
});
data-position="right"
.ui-sub-panel
left
right
.ui-sub-panel {
   ...
   right: -100%;
   ...
}

Is it possible to capture the event of the panelbeforeclose and actually keep the panel open and overlay another panel on top of the existing panel instead of using divs? This solution is a good alternative, but I am just thinking of alternative ways to achieve the soln.

In this case, submenus should be placed outside jQM main panel. They will be hidden once panel is closed. You can keep them open but hidden, they will show once main panel is open. if this is what you want, skip panelbeforeclose part. @Shouvik

so I tried to prevent the panel from closing using the beforeclose event. Unfortunately, I think jquery events are linked for when a panel is open and another needs to be opened, the first needs to be closed. This is probably the reason why i get a stackexceded error.

Perfect! Thanks for your help. Just out of interest, is it possible to remember which panel is open after the overlay is clicked? Of we are at sub panel 2 and click the content area to close all panels, can we have it so clicking the button again will bring us back to the same sub menu panel?

javascript - JQuery Mobile Sliding Panel with nested menu/ multi-level...

javascript jquery jquery-mobile razor panel
Rectangle 27 26

This should do it. This will take care of any existing and future button elements created inside an element with the .popover class:

$('body').on('click', '.popover button', function () {
    // code here
});

That will only work if I want all the buttons to do the same thing

Right, i'm sorry, I just noticed that point in your original post. Is there some reason that you can't give a specific class to each popover?

javascript - Attach event handler to button in twitter bootstrap popov...

javascript jquery twitter-bootstrap event-handling popover
Rectangle 27 12

The hide class is useful to keep the content hidden on page load.

$('.targets').hide().removeClass('hide');

Then show() and hide() should function as normal.

.hide is deprecated as of v3.0.1

Ok, use .hidden as of v3.0.1

javascript - How to hide element using twitter bootstrap 3 and show it...

javascript jquery html css twitter-bootstrap
Rectangle 27 6

Any parent that exists at the time the event is bound and if your page was dynamically creating elements with the class name button you would bind the event to a parent which already exists

$(document).ready(function(){
  //Particular Parent chield click
  $(".buttons").on("click","button",function(){
    alert("Clicked");
  });  
  
  //Dynamic event bind on button class  
  $(document).on("click",".button",function(){
    alert("Dymamic Clicked");
  });
  $("input").addClass("button");  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="buttons">
  <input type="button" value="1">
  <button>2</button>
  <input type="text">
  <button>3</button>  
  <input type="button" value="5">  
  </div>
<button>6</button>

javascript - Event binding on dynamically created elements? - Stack Ov...

javascript jquery events unobtrusive-javascript
Rectangle 27 6

Any parent that exists at the time the event is bound and if your page was dynamically creating elements with the class name button you would bind the event to a parent which already exists

$(document).ready(function(){
  //Particular Parent chield click
  $(".buttons").on("click","button",function(){
    alert("Clicked");
  });  
  
  //Dynamic event bind on button class  
  $(document).on("click",".button",function(){
    alert("Dymamic Clicked");
  });
  $("input").addClass("button");  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="buttons">
  <input type="button" value="1">
  <button>2</button>
  <input type="text">
  <button>3</button>  
  <input type="button" value="5">  
  </div>
<button>6</button>

javascript - Event binding on dynamically created elements? - Stack Ov...

javascript jquery events unobtrusive-javascript
Rectangle 27 6

Better way is to remove , data-dismiss="alert" from your tag , and use class name i.e. close to hide and show the error / warning .

// WHEN CLOSE CLICK HIDE THE ERROR / WARNING .
$(".close").live("click", function(e) 
{   
    $("#add_item_err").hide();
});

// SOME EVENT TRIGGER IT.
$("#add_item_err").show();

[ I am working on dynamically added elements , that's why I am using 'live' , you may have to change as per your req.]

javascript - My Bootstrap alert will not display after being closed - ...

javascript jquery html twitter-bootstrap
Rectangle 27 2

// slide to top of the page
$('.up').click(function () {
    $("html, body").animate({
        scrollTop: 0
    }, 600);
    return false;
});

// slide page to anchor
$('.menutop b').click(function(){
    //event.preventDefault();
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 600);
    return false;
});

// Scroll to class, div
$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#target-element").offset().top
    }, 1000);
});

// div background animate
$(window).scroll(function () {

    var x = $(this).scrollTop();

    // freezze div background
    $('.banner0').css('background-position', '0px ' + x +'px');

    // from left to right
    $('.banner0').css('background-position', x+'px ' +'0px');

    // from right to left
    $('.banner0').css('background-position', -x+'px ' +'0px');

    // from bottom to top
    $('#skills').css('background-position', '0px ' + -x + 'px');

    // move background from top to bottom
    $('.skills1').css('background-position', '0% ' + parseInt(-x / 1) + 'px' + ', 0% ' + parseInt(-x / 1) + 'px, center top');

    // Show hide mtop menu  
    if ( x > 100 ) {
    $( ".menu" ).addClass( 'menushow' );
    $( ".menu" ).fadeIn("slow");
    $( ".menu" ).animate({opacity: 0.75}, 500);
    } else {
    $( ".menu" ).removeClass( 'menushow' );
    $( ".menu" ).animate({opacity: 1}, 500);
    }

});

// progres bar animation simple
$('.bar1').each(function(i) {
  var width = $(this).data('width');  
  $(this).animate({'width' : width + '%' }, 900, function(){
    // Animation complete
  });  
});

javascript - jQuery scroll to element - Stack Overflow

javascript jquery
Rectangle 27 2

// slide to top of the page
$('.up').click(function () {
    $("html, body").animate({
        scrollTop: 0
    }, 600);
    return false;
});

// slide page to anchor
$('.menutop b').click(function(){
    //event.preventDefault();
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 600);
    return false;
});

// Scroll to class, div
$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#target-element").offset().top
    }, 1000);
});

// div background animate
$(window).scroll(function () {

    var x = $(this).scrollTop();

    // freezze div background
    $('.banner0').css('background-position', '0px ' + x +'px');

    // from left to right
    $('.banner0').css('background-position', x+'px ' +'0px');

    // from right to left
    $('.banner0').css('background-position', -x+'px ' +'0px');

    // from bottom to top
    $('#skills').css('background-position', '0px ' + -x + 'px');

    // move background from top to bottom
    $('.skills1').css('background-position', '0% ' + parseInt(-x / 1) + 'px' + ', 0% ' + parseInt(-x / 1) + 'px, center top');

    // Show hide mtop menu  
    if ( x > 100 ) {
    $( ".menu" ).addClass( 'menushow' );
    $( ".menu" ).fadeIn("slow");
    $( ".menu" ).animate({opacity: 0.75}, 500);
    } else {
    $( ".menu" ).removeClass( 'menushow' );
    $( ".menu" ).animate({opacity: 1}, 500);
    }

});

// progres bar animation simple
$('.bar1').each(function(i) {
  var width = $(this).data('width');  
  $(this).animate({'width' : width + '%' }, 900, function(){
    // Animation complete
  });  
});

javascript - jQuery scroll to element - Stack Overflow

javascript jquery
Rectangle 27 2

// slide to top of the page
$('.up').click(function () {
    $("html, body").animate({
        scrollTop: 0
    }, 600);
    return false;
});

// slide page to anchor
$('.menutop b').click(function(){
    //event.preventDefault();
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 600);
    return false;
});

// Scroll to class, div
$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#target-element").offset().top
    }, 1000);
});

// div background animate
$(window).scroll(function () {

    var x = $(this).scrollTop();

    // freezze div background
    $('.banner0').css('background-position', '0px ' + x +'px');

    // from left to right
    $('.banner0').css('background-position', x+'px ' +'0px');

    // from right to left
    $('.banner0').css('background-position', -x+'px ' +'0px');

    // from bottom to top
    $('#skills').css('background-position', '0px ' + -x + 'px');

    // move background from top to bottom
    $('.skills1').css('background-position', '0% ' + parseInt(-x / 1) + 'px' + ', 0% ' + parseInt(-x / 1) + 'px, center top');

    // Show hide mtop menu  
    if ( x > 100 ) {
    $( ".menu" ).addClass( 'menushow' );
    $( ".menu" ).fadeIn("slow");
    $( ".menu" ).animate({opacity: 0.75}, 500);
    } else {
    $( ".menu" ).removeClass( 'menushow' );
    $( ".menu" ).animate({opacity: 1}, 500);
    }

});

// progres bar animation simple
$('.bar1').each(function(i) {
  var width = $(this).data('width');  
  $(this).animate({'width' : width + '%' }, 900, function(){
    // Animation complete
  });  
});

javascript - jQuery scroll to element - Stack Overflow

javascript jquery
Rectangle 27 2

// slide to top of the page
$('.up').click(function () {
    $("html, body").animate({
        scrollTop: 0
    }, 600);
    return false;
});

// slide page to anchor
$('.menutop b').click(function(){
    //event.preventDefault();
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 600);
    return false;
});

// Scroll to class, div
$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#target-element").offset().top
    }, 1000);
});

// div background animate
$(window).scroll(function () {

    var x = $(this).scrollTop();

    // freezze div background
    $('.banner0').css('background-position', '0px ' + x +'px');

    // from left to right
    $('.banner0').css('background-position', x+'px ' +'0px');

    // from right to left
    $('.banner0').css('background-position', -x+'px ' +'0px');

    // from bottom to top
    $('#skills').css('background-position', '0px ' + -x + 'px');

    // move background from top to bottom
    $('.skills1').css('background-position', '0% ' + parseInt(-x / 1) + 'px' + ', 0% ' + parseInt(-x / 1) + 'px, center top');

    // Show hide mtop menu  
    if ( x > 100 ) {
    $( ".menu" ).addClass( 'menushow' );
    $( ".menu" ).fadeIn("slow");
    $( ".menu" ).animate({opacity: 0.75}, 500);
    } else {
    $( ".menu" ).removeClass( 'menushow' );
    $( ".menu" ).animate({opacity: 1}, 500);
    }

});

// progres bar animation simple
$('.bar1').each(function(i) {
  var width = $(this).data('width');  
  $(this).animate({'width' : width + '%' }, 900, function(){
    // Animation complete
  });  
});

javascript - jQuery scroll to element - Stack Overflow

javascript jquery