Hi, I have a header with a brief about someone, and I have an icon that should replace the brief div with social icons, I've already coded the basic markup, but I don't know how to do that with jquery

Here's my code:

            <div id="info">
                <h4 id="aboutinfo">I’m <span>Omar Soliman,</span><p>a front-end developer at <span>LioIT</span></p></h4>
                <div id="social-icons" style="display: none;">
                    <a href="#" id="fb"><span class="socicon socicon-facebook"></span></a>
                    <a href="#" id="tw"><span class="socicon socicon-twitter"></span></a>
                    <a href="#" id="dr"><span class="socicon socicon-dribbble"></span></a>
                    <a href="#" id="vm"><span class="socicon socicon-vimeo"></span></a>
                </div>
            </div>

Now that h4 tag called "aboutinfo" should be replaced onclick of a button with that div called "social-icons"

Now that h4 tag called "aboutinfo" should be replaced onclick of a button with that div called "social-icons"

you'll need to clarify what you are asking. What is it that will be clicked? Where are the other elements that you want to display?