Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: help please!

  1. #1
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    help please!

    Hello. I am a new member to these forums and first of all I would like to hello to all of the active members!



    I got a problem. I learnt a technique in College that I can't remember no more, but it is involved with a widget in html/css. The idea was like a drop down menu but for content. Eg. I would have like "my profile" and I don't want to write about myself on the website and waste the space in the borders, so I would like to know how to make something in html that "myprofile" is clickable for the users and then the box expands and in that box the information is written. and then he can click back to un-expand.

    Edit fiddle - JSFiddle something like that, but I am new to javascript so can someone tell me how to input this in html/css/javascript? I would really appreciate it

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,285
    Thanks
    23
    Thanked 611 Times in 610 Posts
    This straight from W3schools: W3Schools Online Web Tutorials
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script> 
    $(document).ready(function(){
      $("#flip").click(function(){
        $("#panel").slideToggle("slow");
        if ($("#flip").html() == 'Click to slide the panel down'){
             $("#flip").html('Click to slide the panel up');
        }else{
            $("#flip").html('Click to slide the panel down');
        }
      });
    });
    </script>
     
    <style type="text/css"> 
    #panel,#flip
    {
    padding:5px;
    text-align:center;
    background-color:#e5eecc;
    border:solid 1px #c3c3c3;
    }
    #panel
    {
    padding:50px;
    display:none;
    }
    </style>
    </head>
    <body>
     
    <div id="flip">Click to slide the panel down</div>
    <div id="panel">Hello world!</div>
    
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •