SOURCE

console 命令行工具 X clear

                    
>
console
  

    <div class="first">

        <div id="a">
            <h2><a href="#a">Second Accordion heading</a></h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi commodi consequatur deleniti dignissimos, doloribus eos error, harum iste natus necessitatibus perferendis, perspiciatis quasi qui quo quod quos reprehenderit tempora voluptatum.</p>
        </div>


        <div id="b">
            <h2><a href="#b">Second Accordion heading</a></h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aperiam aspernatur, blanditiis consequuntur cum dicta dolorem ea est in iste minus odio officiis quia quis rerum saepe tempora vel voluptates.</p>
        </div>



        <div id="c">
            <h2><a href="#c">Second Accordion heading</a></h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab dicta, facere illo in quas rem sequi ut voluptatibus! Cum dolorem doloribus maxime neque officia! Distinctio dolor ipsa nam nisi rem?</p>
        </div>

    </div>
      .first
        {
            width:960px;
            margin: 0 auto;
            border: 1px solid rgb(221,221,221);

        }
        .first h2
        {
            width: 960px;
            height:80px;
            background-color:rgb(56,204,122);
            margin: 0;
            text-align: center;
            line-height: 80px;
            position: relative;
            transition-duration: 0.6s;




        }
        .first h2 a
        {
            display: inline-block;
            width: 960px;
            font-size: 15px;
            color: white;
            text-decoration: none;
            transform: rotateX(0deg);




        }
        .first h2:after
        {
            border: 10px solid #fff;
            border-color: #ffffff transparent transparent;
            content: "";
            height: 0;
            position: absolute;
            left: 50px;
            top: 40px;
            width: 0;
            transform: rotate(-90deg);
            transition-duration: 0.5s;
        }
        .first :target h2,
        .first h2:focus,
        .first h2:hover,
        .first h2:active

        {
            background: rgb(43,166,89);
            transform: rotateX(0deg);

        }
        .first :target h2,
        .first :target a
        {
            transform: rotateX(180deg);
        }
        .first p
        {
            width:960px;
            /*height:230px;*/
            height: 0px;
            overflow: hidden;
            background-color: rgb(238,238,238);
            margin: 0px;
            transition-duration: 0.7s;
            border-bottom: 2px solid rgb(48,187,100);

        }
        .first :target p
        {
            height: 230px;
            overflow: auto;
        }
        .first :target h2:after
        {
            transform: rotate(-180deg);
        }