Trying to toggle 2 divs

Question

I've found lots of answers for toggling divs, but none are quite doing what I'm looking for. I want to have 2 buttons (grid & list views). When the page loads, the grid div is visible. If someone clicks the list view button, the grid div will go to display: none, and the list div will display:block. If you happen to click the list view button again while the list div is already displayed, nothing would happen. But if you click on the grid view button, the divs would toggle again, and vice versa.

All I've managed to accomplish is that clicking on the "list view" button displays that div, but it does not make the grid view disappear. Only clicking on the grid view button makes the grid disappear. I'm sure there's a logic I'm completely missing here, and I apologize for having a fried brain right now. But I'm just getting frustrated.

Here's my code:

jQuery(function(){
    jQuery('.showSingle').click(function(){
          var objdiv = $('#div'+$(this).attr('target'));
          var toggleDisplay = false;
          if(objdiv.css('display')=="none"){
                toggleDisplay = true;
          }
          jQuery('.targetDiv').hide();
          jQuery('#div'+$(this).attr('target')).toggle(toggleDisplay);
    });
});








  
  



    Grid View Here



     List view here

Thanks in advance.

user_519413 · Answer

The logic you're using is more complex than it needs to be. All you need to do when a button is clicked is hide all the #divN elements, which can be done most simply by adding a common class to them, then showing the one related to the button which was clicked.

To target the div related to the button you can put the id selector in the href attribute of the a element. Try this example:

jQuery($ => {
  $('.showSingle').click(e => {
    e.preventDefault();

    $('.content').hide();
    let targetSelector = $(e.currentTarget).attr('href');
    $(targetSelector).show();
  });
});

.content { display: none; }
#div1 { display: block; }







  
  


Grid View Here
List view here

Trying to toggle 2 divs

1 Answers