Accorditon List(手提琴）_accordionlist-CSDN博客

本文链接：https://blog.csdn.net/weixin_49220417/article/details/122815545

CSS3实现点击哪个弹出对应内容，不点击则会收起

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Acction List</title>
</head>
<style>
    *{
        padding: 0px;
        margin: 0px;
    }
    div:first-of-type{
        border: 1px solid black;
        width: 200px;
        height: 50px;
    }
    div:nth-of-type(2){
        border: 1px solid black;
        width: 200px;
        height: 100px;
        background-color: gray;
    }
    div:nth-of-type(3){
        border: 1px solid black;
        width: 200px;
        height: 100px;  
    }
a{
    text-decoration: none;
    display: block;
    color: #fff;
}
div[id]{
    height: 20px;
    background-color: #fff;
    width: 200px;
   color:black;
}
div[id]:not(:target){
    display: none;
}

</style>
<body>
    <div>
        <h3>Accordion List</h3>
    </div>
    <div>
        <ul>
          
            <a href="#text1">你猜1</a> 
            <div id = "text1"> zzn</div>
            <a href="#text2">你猜2</a>
            <div id = "text2"> zzn</div>
            <a href="#text3">你猜3</a>
            <div id = "text3"> zzn 爽吧 哈哈</div>
        </ul>
    </div>

    <div>

    </div>
    
</body>
</html>

在这里插入图片描述