For a project, I wanted to use jQuery to make a semi-foldable DIV element. I was suffering from the fact that the accordion in jQueryUI did not provide relevant methods, so I wrote one myself. When I used jQueryUI in the past, I found that all available accordions were collapsed, and there was no way to set the minimum height for folding.
The code quality is very low, I hope an experienced person can give me some pointers.
The picture below is a display of the effect, which can be expanded and contracted through jQuery functions
//author: hlhr
//require: Jquery1.4 and above
function animate_toggle_height(maxh,minh,maxo,mino,element,speed) { //This is vertical, parameter explanation: maximum height, minimum height, maximum transparency, minimum transparency, element, animation speed
if (element.css("height")==minh.toString().concat(" px")){//If it is the minimum height, expand
element.animate({
height:maxh,
opacity:maxo
},{queue: false},speed);
return "Fold"
}
if (element.css("height")==maxh.toString().concat("px")){//If it is the maximum height, fold it
$ (this).html("");
element.animate({
height:minh,
opacity:mino
},{queue: false},speed);
return " Read more";
}
}
function animate_toggle_width(maxw,minw,maxo,mino,element,speed) {
if (element.css("width")==minw.toString( ).concat("px")){
element.animate({
width:maxw,
opacity:maxo
},{queue: false},speed);
return " Fold"
}
if (element.css("width")==maxw.toString().concat("px")){
element.animate({
width:minw,
opacity:mino
},{queue: false},speed);
return "Read more";
}
}