[JQuery] jQuery self-made simple accordion effect (with implementation principle) and jquery accordion

[JQuery] jQuery self-made simple accordion effect (with implementation principle) and jquery accordion

The accordion effect is often used in the navigation bar on the left of the webpage. When there are a lot of navigation content, the display of the accordion is more conducive to information transmission and formatting. Below is a simple accordion effect created by myself, no image is used, and the background color is set at will. You can modify the background color in your project.

:

Implementation principle:

1. When you click the span label (that is, the first-level navigation), first determine whether the Sub-directory li has been expanded (here a on class is used for marking );
2. If yes, the current li will be reduced, removed from the on class tag, and the prompt on the Right of span will be changed to the plus sign;
3. If not, expand the current li, add the on class tag, and change the prompt on the Right of span to the minus sign.

Source code:

<! DOCTYPE html> 

Well, this is a simple accordion ~



Author: Zhizhi
Sign: The road is long, and I will go up and down.
 
Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.