jQuery toggle to hide an element

Question

I am trying to create an event where click the button will display the menu, but since each module has such a button, when I click button of other div, the current menu stays on, is there any way to solve this?

I tried to create some even in the first part of the toggle but it cause more problem: I need to click twice the other button to make it appear...

html:

<ul>
<li class="item">
<div class="portfolio-image-wrapper">
  <a class="hideModelLink" href="#">ModelLink</a>
  <img src="assets/img/gallery/2.jpg" alt="" />
  <div class="edit-menu">
    <a href="#" target="_blank">Rename</a>
    <a href="#" target="_blank">Delete</a>
  </div>
  <div class="item-info-overlay"></div>
</div>
<div class="item-info">
  <h4 class="text-dark no-margin title semi-bold"><a class="" target="_blank" href="#">Creative Illustration</a></h4>
  <p>3/21/2014</p>
</div>
<a class="edit-button"></a>
</li>
...
</ul>

js:

$('.edit-button').toggle(function(){
    $(this).siblings('.portfolio-image-wrapper').find('.edit-menu').css({
        display: 'block'
    });
    $(this).siblings('.portfolio-image-wrapper').find('.item-info-overlay').css({
        background: 'none'
    });
    $(this).css({
        'background-color': '#f5f5f5'
    });
},
function(){
    $(this).siblings('.portfolio-image-wrapper').find('.edit-menu').css({
        display: 'none'
    });
    $(this).siblings('.portfolio-image-wrapper').find('.item-info-overlay').css({
        background: 'rgba(153, 153, 153, 0.2)'
    });
    $(this).css({
        'background-color': '#ffffff'
    });
});

You should make a `jsFiddle` of the issue to encourage people to play with it visually. — Gavin42, Jun 16 '14 at 19:10
I think jQuery has removed the version of `.toggle()` you are using (the one that takes multiple callbacks as arguments). — jfriend00, Jun 16 '14 at 19:15
The «toggle» method was deprecated in jQuery 1.8 and removed in jQuery 1.9 : [http://api.jquery.com/toggle-event/](http://api.jquery.com/toggle-event/). Use [jQuery Migrate](http://jquery.com/download/#jquery-migrate-plugin) **or** use an alternative code to acheive your goal, see these posts : [jQuery : Use an alternative to .toggle() which is deprecated](http://stackoverflow.com/questions/14478994/jquery-use-an-alternative-to-toggle-which-is-deprecated) or [jQuery .toggle event deprecated, What to use?](http://stackoverflow.com/questions/17583215/jquery-toggle-event-deprecated-what-to-use). — Cholesterol, Jun 16 '14 at 19:18

score 0 · Answer 1 · edited May 23 '17 at 12:05

Try switching your toggle callback functions around...

$('.edit-button').toggle(function () {
    $(this).siblings('.portfolio-image-wrapper').find('.edit-menu').css({
        display: 'none'
    });
    $(this).siblings('.portfolio-image-wrapper').find('.item-info-overlay').css({
        background: 'rgba(153, 153, 153, 0.2)'
    });
    $(this).css({
        'background-color': '#ffffff'
    });
}, function () {
    $(this).siblings('.portfolio-image-wrapper').find('.edit-menu').css({
        display: 'block'
    });
    $(this).siblings('.portfolio-image-wrapper').find('.item-info-overlay').css({
        background: 'none'
    });
    $(this).css({
        'background-color': '#f5f5f5'
    });
});

Demo here: http://jsfiddle.net/9jbUm/

Also, some enhancements to the code in terms of performance, and readability...

$('.edit-button').toggle(function () {

    // it is good to cache jquery objects, to save on expensive execution time
    $this = $(this);
    $this.css({ 'background-color': '#ffffff' });

    // also cache derived jquery objects...
    $siblings = $this.siblings('.portfolio-image-wrapper');
    // use the jquery wrapper function to select within a specific context
    $('.item-info-overlay', $siblings).css({ background: 'rgba(153, 153, 153, 0.2)' });
    // use `hide` instead of `.css({display: 'none'})`
    $('.edit-menu', $siblings).hide();

}, function () {

    $this = $(this);
    $this.css({ 'background-color': '#f5f5f5' });

    $siblings = $this.siblings('.portfolio-image-wrapper');

    $('.edit-menu', $siblings).show();    
    $('.item-info-overlay', $siblings).css({ background: 'none' });

});

Demo here: http://jsfiddle.net/9jbUm/1/

Also, if you don't have that version of toggle in your jquery@1.9+ then you can emulate it with something like...

$.fn.toggleClick = function(){

    var functions = arguments ;

    return this.click(function(){
            var iteration = $(this).data('iteration') || 0;
            functions[iteration].apply(this, arguments);
            iteration = (iteration + 1) % functions.length ;
            $(this).data('iteration', iteration);
    });
};

$('.edit-button').toggleClick(function () {

    /* ... */

});

Demo here: http://jsfiddle.net/9jbUm/2/

please don't do that: $(this).siblings('.portfolio-image-wrapper').find('.edit-menu').css({ display: 'none' }); $(this).siblings('.portfolio-image-wrapper').find('.item-info-overlay').css({ background: 'rgba(153, 153, 153, 0.2)' }); $(this).css({ 'background-color': '#ffffff' }); This is really bad for performance, change the class and do this changes through the css, you can even use the transition effect. — Sakai, Jun 16 '14 at 19:14
Weird question, but surely the `Rename` and `Delete` options should only be first visible after `edit me`? — iCollect.it Ltd, Jun 16 '14 at 19:14
@Billy-Moon Thanks! Appreciate. I updated the code already. Would you mind take a look into the testing page? [link](http://ruoxicui.com/user.html), the problem is that the tile won't position appropriately at the first load until you resize the window a little bit... And back to the original question, to swap the code of the toggle() function still cannot hide the edit menu of the tile if it is already open, and you are clicking the button of a different tile. — Toonic, Jun 16 '14 at 22:22

jQuery toggle to hide an element

1 Answers1