Home > Developer > Web Develop
Maybe we have encountered this problem in development, we just see a topic or a simple introduction, then a click will expand the corresponding detailed content below. It is easy to achieve this effect in JQM. Here's an example code:
<!DOCTYPE HTML><HTML><Head><title>Collapsible Content-2</title><Metaname= "Viewport"content= "Width=device-width, initial-scale=1"><Linkrel= "stylesheet"href= "Http://code.jquery.com/mobile/latest/jquery.mobile.min.css" /><Scriptsrc= "Http://code.jquery.com/jquery-1.7.1.min.js"></Script><Scriptsrc= "Http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></Script></Head><Body><DivData-role= "page"ID= "First"> <DivData-role= "header"> <H1>Collapsible Test</H1> </Div> <DivData-role= "Content"> <DivData-role= "Collapsible"> <H3>First</H3> <P>Hello World ...</P> </Div> <DivData-role= "Collapsible"> <H3>First</H3> <P>Hello World ...</P> </Div> <DivData-role= "Collapsible"Data-collapsed-icon= "Arrow-r"Data-expanded-icon= "arrow-d"> <H3>First</H3> <P>Hello World ...</P> </Div> <DivData-role= "Collapsible"Data-content-theme= "C"Data-iconpos= "Right"> <H3>First</H3> <P>Hello World again ...</P> </Div> </Div></Div></Body></HTML>
The page is displayed as follows: The first one is not opened, the 第二、三、四个 is clicked.
The third one uses the data-collapsed-icon= "Arrow-r" data-expanded-icon= "arrow-d" to modify the icon.
The fourth uses data-content-theme= "C" to modify the displayed theme so that its contents are surrounded by the content with a border. Data-iconpos= "Right" to display the icon on the left.
We can enclose all the div with the data-role= "collapsible" attribute in a <div data-role= "Collapsible-set" > to make it a whole, but when you click on one of them, The others will be turned off automatically. This shows the following effect:
jquerymobile-Collapsible contents (collapsible content)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
