Fully parse Bootstrap accordion effect _ javascript skills

This article describes how to fully parse the Bootstrap accordion effect. If you need it, you can refer to the custom data-toggle attribute to trigger the accordion. The data-toggle value is set to collapse, data-target = "# collapsed area identifier ".
Step 1: Design a panel combination with three folding areas:

Step 2: add content to the PanelEach panel consists of two parts. The first part is the panel title panel-heading, and the title panel-title is added here. The second part is the panel content, that is, the folding area. Use the panel-collapse style.

  
Title 1
  
    
Folding area content...
  

Step 3: to partition the title and contentBind the title area and panel area together by means of an anchor link:

  
    
Title 1
    
      
Folding area content...
    
  
  
    
Title 2
    
      
Folding area content...
    
  
......

Step 4: Check whether the control panel content area is visible.In the Bootstrap framework, if you want to make the content area invisible, you only need to add collapse to the panel-collapse style.

The content area of each panel is hidden and invisible, but sometimes the content of the first panel is visible by default. What should I do? In fact, the Bootstrap author has already considered this for everyone. You only need to append the in style on the basis of collapse.

  
Title 1
  
    
Folding area content...
  

Step 5: Activate the interactive behavior of the accordion.To complete interaction, You need to customize two attributes in the title link. One is data-toggle and the value is collapse; the other is data-target, and the value is the identifier of the content area of each panel, for example, ID: # panel1, # panel2, and # panel3

P class = "panel-accordion panel-default">
Title 1
  
    
Folding area content...
  

　　Note:In this case, do not add data-target = "# panel1", because href = "# panel1" is already in use ", if the button is used as the trigger, data-target = "# panel1" must be used.
Step 6: define the data-parent attributeWhen you click an element, close all the collapsed areas and then open the area to be clicked (if the area to be clicked is displayed, it is closed ). This data-parent value matches the identifier of the accordion panel container. For example, this parameter indicates # myAccordion:

  
    
Title 1
... 7

VII. complete code

  
    
Title 1
    
      
Subject content
    
  
  
    
Title 2
    
      
Content corresponding to heading 2
    
  
  
    
Title 3
    
      
Content corresponding to Heading 3
    
  

The above is a comprehensive analysis of the Bootstrap accordion effect, hoping to help you learn.