"Feature description"
The simplest option to cancel a multi-select effect (taking fruit from a fruit basket for example)
"HTML code description"
<div class= "box" id= "box" > <input class= "out" placeholder = "Please pick the fruit i want" disabled> <button class= "BTN" > Close my Fruit basket </button><br> <ul class= "list" > <li class= "in red" > Apple </li> <li class= "in purple" > Grapes </li> <li class= "in yellow" > Banana </li> <li class= "in Green > Ome </li> <li class= "in orange" > Oranges </li> </ul></div>
"CSS Key code description"
//set the white text effect in the display box. out{width:300px; height:30px; Line-height:50px; padding:10px; Text-Align:center; border:1px solid #ccc; Border-radius:5px; Font-size:20px; Color: #f1ebe5; Text-shadow:0 8px 9px #c4b59d, 0px-2px 1px #fff; Font-Weight:bold; Background:linear-gradient (to bottom, #ece4d9 0, #e9dfd1 100%); Vertical-Align:middle;}//Fruit Basket Display effect. list,.list_hid{height:50px; Line-height:50px; Margin-top:20px; Overflow:hidden; Text-Align:center; Background-color: #ccc; Border-radius:10px; transition:500ms height;}//Fruit Basket Hidden effect. list_hid{Height:0;}
"JS Code description"
//Get the whole boxvarOBox = document.getElementById (' box ');//Get buttonvarOBTN = obox.getelementsbytagname (' button ') [0];//get the Show boxvarOout = obox.getelementsbytagname (' input ') [0];//Get Fruit BasketvarOlist = Obox.getelementsbytagname (' ul ') [0];//get all the fruit inside the fruit basketvarAIn = olist.getelementsbytagname (' li ');//bind an event to a buttonObtn.onclick =function(){ //If the list classname is a list, it means that the fruit basket is in the open state. if(Olist.classname = = ' List '){ //change its classname to List_hid, close the fruit basketOlist.classname = ' List_hid '; //set the text to show as open my fruit basket This. InnerHTML = ' Open My fruit basket '; //The Fruit Basket is closed at this time}Else{ //change its classname to list, open the fruit basketOlist.classname = ' list '; //set text to close my fruit basket This. InnerHTML = ' Close my fruit basket '; }} for(vari = 0; i < ain.length; i++){ //add a tag to each fruit, default to False, indicating that it is not selectedAin[i].mark =false; //add events to each fruitAin[i].onclick =function(){ //When the fruit is selected, uncheck it and select it when the fruit is not selected. This. Mark =! This. Mark; //If the fruit is selected, the text color turns bright gray if( This. Mark) { This. Style.color = ' #ccc '; //if unchecked, the text color is black}Else{ This. Style.color = ' black '; } //Run the Marquee functionfnout (); }}//set up a marquee functionfunctionfnout () {//set a temporary string to store the values that the display box will display varstr = "; for(vari = 0; i < ain.length; i++){ //when the fruit is selected if(Ain[i].mark) {//add its innerHTML to the temporary stringstr + = ', ' +ain[i].innerhtml; } } //then remove the comma from the first fruit before you start.Oout.value = Str.slice (1);};
"Effect Show"
"Source View"
The simplest option to cancel a multi-select effect (taking fruit from a fruit basket for example) "Jsdemo"