locked
Icon Link to show a div on click RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User1991482975 posted

    Hi, i have a normal link with an icon, when i click on it i would love to show a full width div and change the link icon into an "X" who allows me to close the div..

    If is possible the div should come down from the top with an CSS animation... (if is possible with no javascript)

    How to achive this?

    Thanks

    Friday, March 30, 2018 8:48 AM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-1838255255 posted

    Hi grafic.web,

    According to your description and needs, you say link with icon, want to change the icon when click it, could you post the related code for us to modify? 

    Also about CSS animation, please check these sample code: 

    Sample Code:

    <head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: red;
            ;
            animation: mymove 3s infinite;
            -moz-animation: mymove 3s infinite; /* Firefox */
            -webkit-animation: mymove 3s infinite; /* Safari and Chrome */
            -o-animation: mymove 3s infinite; /* Opera */
        }

        @keyframes mymove {
            from {
                top: 0px;
            }

            to {
                top: 300px;
            }
        }

        @-moz-keyframes mymove /* Firefox */
        {
            from {
                top: 0px;
            }

            to {
                top: 300px;
            }
        }

        @-webkit-keyframes mymove /* Safari and Chrome */
        {
            from {
                top: 0px;
            }

            to {
                top: 300px;
            }
        }

        @-o-keyframes mymove /* Opera */
        {
            from {
                top: 0px;
            }

            to {
                top: 300px;
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>

    Best Regards,

    Eric Du 

    Monday, April 2, 2018 6:43 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User1991482975 posted

    Hi, in fact it has to be a simple link <a href="myaddress">Link</a> and when i clik on it i should show a div...

    Monday, April 2, 2018 3:55 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-1838255255 posted

    Hi grafic.web,

    According to your needs, please check the following sample code:

    <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        #box {
            width: 500px;
            height: 800px;
            border: 1px solid red;
            margin: 0 auto;
        }

        #Taga {
            display: block;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(function () {
            $("#Taga").click(function () {
                $("#box").show("slow","linear");
            });
        })
    </script>
</head>
<body>
    <a id="Taga" href="#">Link</a>
    <div id="box" style="display:none">

    </div>
</body>

    Best Regards,

    Eric Du 

    Wednesday, April 4, 2018 8:59 AM