How to redirect to another div while clicking on accordion elements?

Question

Whenever user click on default1 tab it will open default2 and when again click on default1 while default2 is active it will show default1 accordions.

Now I am trying whenever user click on any accordion element of default1 i.e. 1 and 2, as show in image it will also redirect to default2 tab

click on any area of accordion 1 or 2 element it should redirect to default2 tab!

p.s- not only on 2 user can click anywhere on the accordion and it will redirect to tab2 i.e. default2

// TAB Buttons
const tab1 = document.querySelector('#tab11')
const tab2 = document.querySelector('#tab12')

// TAB Content
const allTabPane = document.querySelectorAll('.tab-pane')

tab1.addEventListener('click', toggleTabs);
tab2.addEventListener('click', toggleTabs);

function clickTab(tab) {
    if (tab.parentNode.classList.contains('active') === false) tab.click();
}

function toggleTabs(e) {
  e.preventDefault();
  if (this.parentNode.classList.contains('active')) {
      let toClick = this.parentNode.parentNode.querySelector('li:not(.active) > a');
      setTimeout(function() {
          toClick.click();
      }, 40);
  }
}

.pg-content p {
  font-family: poppins;
  font-size: 14px;
  margin-bottom: 0px;
}

.acc-head {
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  align-items: center;
}

.tab-accrd a {
  text-decoration: none;
  color: #000;
  font-family: poppins;
}

.tab-accrd a i {
  color: #FC453E;
}

.tab-accrd .card {
  background: #eee;
  border-bottom: 1px solid #FC453E;
  border-radius: 0px;
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, .125);
}

.tab-accrd .card-header {
  padding: 0.75rem 1.25rem;
  margin-bottom: 0;
  background-color: rgba(0, 0, 0, .03);
  border-bottom: 1px solid rgba(0, 0, 0, .125);
}

.tab-accrd .card-header:first-child {
  border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
}

.tab-accrd h5 {
  font-size: 20px;
}

.p-0 {
  padding: 0px;
}

.nav-tabs {
  border: none;
}

.ml-1,
.mx-1 {
  margin-left: 0.25rem!important;
}

.accordion-head i {
  float: right;
}

.accordion-head>.collapsed>i:before {
  content: "\f151";
}

html {
  scroll-behavior: smooth;
}

.tab-accrd span {
  font-size: 30px;
  font-weight: 600;
  color: #fc453e;
}






  
    
      
        
        Default 1
        Default 2
      
    
    
      
        
          
            
              
                
                  1
                  
                    What is Lorem Ipsum?
                  
                

              
              
                
                  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown

                  

                
              
            
            
              
                
                  2
                  
                    What is Lorem Ipsum?
                  
                

              
              
                
                  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
                  

                
              
            

          
        
        
          
            
              
                
                  1
                  
                    What is Lorem Ipsum?
                  
                

              
              
                
                  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
                  

                
              
            
            
              
                
                  2
                  
                    What is Lorem Ipsum?
                  
                

              
              
                
                  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type

Lucretius · Accepted Answer

Seems to be working fine in this fiddle even with the clickTab() and toggleTabs() functions disabled, the only change I made was I made sure to load the javascript libraries last at the bottom of the body to make sure the dom elements are loaded before they start working their magic.

Also it looks like in your code you have non-unique ID's that will need to be modified, otherwise results will be unexpected.

https://jsfiddle.net/te28cru4/

Update:

https://jsfiddle.net/te28cru4/10/

Here are the changes:

The panel group for tabs "Default 1" and "Default 2" are duplicate IDs called id="faqAccordian". ID's must unique, so I renamed the ID for tab group "Default 2" to id="faqCollapse2" and left "Default 1" as is. This allows the "collapse" feature to be separated on each tab.
the
elements on the "Default 2" page that were set for data-parent="#faqAccordian" were updated to data-parent="#faqAccordian2" to keep the separation consistent.
The
elements on the "Default 2" tab for id="question9" and id=question1 did not have the "collapse" class, so when clicking into that tab both were initially expanded. I added the collapse class to both.
I deleted all of your javascript because I don't think its needed. Accordian functionality is handled natively in the boostrap libraries.
Again, I moved the javascript libraries to the bottom of the tag to allow the dom to load.
Added some anchor tags in each content section of each according that serves as convenience navigation between the two tabs.



  
    
  
  
    
      
        
          
            
            Default 1
            Default 2
          
        
        
          
            
              
                
                  
                    
                      Tab 1-1
                      
                        What is Lorem Ipsum?
                      
                    
                  
                  
                    
                      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown

                      
                      Tab 2
                    
                  
                
                
                  
                    
                      Tab 1-2
                      
                        What is Lorem Ipsum?
                      
                    
                  
                  
                    
                      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
                      
                      Tab 2
                    
                  
                
              
            
            
              
                
                  
                    
                      Tab 2-1
                      
                        What is Lorem Ipsum?
                      
                    
                  
                  
                    
                      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
                      
                      Tab 1
                    
                  
                
                
                  
                    
                      Tab 2-2
                      
                        What is Lorem Ipsum?
                      
                    

                  
                  
                    
                      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
                      
                      
                      Tab 1

$(document).on('click', '.toTab1', function(e){
        e.preventDefault();
        $('#tab11').trigger('click');
})

$(document).on('click', '.toTab2', function(e){
        e.preventDefault();
        $('#tab12').trigger('click');
})

Update 2:

From clarification in the comments, accordions are not meant for navigation and that by using them for navigation the "content" piece of the expanded accordion will never be seen by the user. Accordions are for compressing content vertically.

What you probably want are html buttons, you can style them as wide and as big as you like.

https://www.w3schools.com/tags/tag_button.asp

How to redirect to another div while clicking on accordion elements?

Answers (1)

Related Questions