Tab content on jQuery

Question

I'm a beginner front-end development. I'm from Ukraine and my English is so so... but I learning English again and again.
So I'll go on...

How can I make that when I click on a new block, the previous one is closed? enter image description here

I have this code


 
                        
        
            
            
            
            
        
    
    Электрические шторы
    SOMFY 1
    
    
    







    
    
    
    
        Электрические шторы
        SOMFY 1

$('.arrow').on('click', function(){
        $('.arrow').removeClass('active');
        $('.arrow').parents().siblings('.gallery__content');
        $(this).addClass('active');
        $(this).parents().siblings('.gallery__content').slideToggle();
    });

user_14079110 · Answer

I dont know if I understood all of your requirments, but from what I understood I tried to make this:

$(document).ready(function() {
  $('.button').click(function() {
  $(".box").hide();
    $(this).siblings(".box").toggle();
  });
});

.box {
  display: none;
}

  


  
  front page
  
    This is a paragraph with little content. This is another small paragraph.
  



  
  front page
  
    This is a paragraph with little content. This is another small paragraph.
  



  
  front page
  
    This is a paragraph with little content. This is another small paragraph.

user_2943218 · Answer

You almost had it, but I would recommend that you use .closest() combinded with .find() in your case like the example below.

$('.arrow').on('click', function() {
  $('.arrow').removeClass('active');
  $('.arrow').not(this).closest('.gallery__item').find('.gallery__content');
  $(this).addClass('active');
  $(this).closest('.gallery__item').find('.gallery__content').slideToggle();
});

Demo

$('.arrow').on('click', function() {
  $('.arrow').removeClass('active');
  $('.arrow').not(this).closest('.gallery__item').find('.gallery__content').hide();
  $(this).addClass('active');
  $(this).closest('.gallery__item').find('.gallery__content').slideToggle();
});

.gallery__content {
  display: none;
}



 
                        
        
            
            
            arrow
            
        
    
    Электрические шторы
    SOMFY 1
    
    
    





    
     
                            
            
                
                
                arrow
                
            
        
        Электрические шторы
        SOMFY 1

Tab content on jQuery

2 Answers