jquery implements multiple GridView folding spread effect

In the actual project development, sometimes the data will have a lot of classification, we can use the GridView to display the data classification, when the amount of data is very large, a page will be occupied by a category, but we want to look at other categories, we have to swipe down the mouse, Now we use jquery to achieve the folding and unwinding effects of the classification.

So when we want to look at the following classification, we can fold the previous classification, the practice is to add a div and hidden on each of the GridView, where the value of Hidde is to save the div hidden or displayed values (such as 0, 1), Add class to each IMG button, display the button to add class= "group_show", hide the button to add class= "Group_hide", so click any button will trigger the Click event, In the Click event, the value of the hidden is modified accordingly, at the beginning, by traversing the value of hidden to determine whether the div is displayed.

The code is as follows:

<script type= "Text/javascript" src= ". /js/jquery-2.1.3.min.js "></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("Div#main Input:hidden"). each (function () {
if ($ (this). val () = = "0") {
var divid = ' div_ ' + $ (this). attr (' id ');
$ (' # ' + divid). Hide ();
}
else {
var divid = ' div_ ' + $ (this). attr (' id ');
$ (' # ' + divID). Show ();
}
});

            $ (' img.group_hide '). Click (function () {
                $ (' #div_result '). FadeOut (+);  //need to handle it himself. Find the appropriate DIV
                 $ (' #result '). val (0);  //you need to find hidden and modify the value
            });
            $ (' img.group_show '). Click (function () {
                $ (' #div_result ') . fadeIn (1000); Need to handle it yourself find the corresponding div
                $ (' #result '). val (1); Similarly need to find hidden, and modify the value
           });
       })



jquery implements multiple GridView folding spread effect