My purpose is : When the first image is clicked, the image's description will be opened from the top side. When the next image is clicked, the second image's description will be opened and the first image's description will be hidden. how can i do this using amp ??
You can use amp-bind to bind the currently selected image to it's description, e.g. by setting variable imageId every time an image is clicked. The descriptions are hidden based on the image id. e.g. [hidden]="imageId!=3".
Here is a working version:
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>amp-bind</title>
<link rel="canonical" href="https://ampbyexample.com/components/amp-bind/">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
<p [hidden]="imageId>=1">
Bio 1
</p>
<p hidden [hidden]="imageId!=2">
Bio 2
</p>
<p hidden [hidden]="imageId!=3">
Bio 3
</p>
<p hidden [hidden]="imageId!=4">
Bio 4
</p>
<amp-img width=40 height=40 on="tap:AMP.setState({
imageId: 1
})" src=https://unsplash.it/40/40/image=10 tabindex=0>
</amp-img>
<amp-img width=40 height=40 on="tap:AMP.setState({
imageId: 2
})" src=https://unsplash.it/40/40/?image=11 tabindex=0>
</amp-img>
<amp-img width=40 height=40 on="tap:AMP.setState({
imageId: 3
})" src=https://unsplash.it/40/40/?image=12 tabindex=0>
</amp-img>
<amp-img width=40 height=40 on="tap:AMP.setState({
imageId: 4
})" src=https://unsplash.it/40/40/?image=13 tabindex=0>
</amp-img>
</body>
</html>
One possible optimisation would be to wrap the images inside an amp-selector element and let the amp-selector update the imageId.