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 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Location
    MUMbai
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Hide and Show text/content - pls Help!

    Hello friends,

    being great over here and feeling glad to be part of the Codingforums.com
    its really really great pleasure here..
    this is my first post here.

    I am getting bit problem in html.
    I am getting small problem and I am sure you all are help me out..

    Kindly please show me how to hide and show content in html
    once i click content will show and if i click again content will be hide..

    Please if anyone know pls revert here (Waiting for reply)

    Thanks

    Vinay

  • #2
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts
    Hello Vinay,

    Welcome to CodingForums.com, we're glad to have you here

    There is multiple ways to go about what you want actually, however, I'm not sure exactly how you'll be implementing this into your code or what you'll be applying this to.

    Below is a way of achieving this using CSS styling for <li>'s:

    HTML
    Code:
    <ul>
       <li class="show">
         <p>item shown</p>
       </li>
       <li class="hide">
          <p>item hidden</p>
       </li>
    </ul
    CSS
    Code:
    .show{ display: block;}	
    .hide{ display: none;}
    Last edited by dylanbaumannn; 02-10-2012 at 09:40 PM.

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Location
    MUMbai
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    HI dylan thanks for such quick reply..

    but i need something different

    i need one href link where i click then text content will show on the page
    and if click on that same link that text content will hide again..
    did u get me what i m trying to say?

    i have some code where this can be possible but they have some problem like where the text content shown already on the page.. which is not required in my task i need hide text already and whe i click then it will show..

    like that

  • #4
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts
    So you need it to be hidden by default when the page first loads? Also, what kind of container are you using to display the text? (divs, li's, tables, etc)?

    If you're using <li>'s here is an excellent method for hiding/showing them
    http://code.stephenmorley.org/javasc...apsible-lists/

  • #5
    New to the CF scene
    Join Date
    Feb 2012
    Location
    MUMbai
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by dylanbaumannn View Post
    So you need it to be hidden by default when the page first loads? Also, what kind of container are you using to display the text? (divs, li's, tables, etc)?

    If you're using <li>'s here is an excellent method for hiding/showing them
    http://code.stephenmorley.org/javasc...apsible-lists/

    your first question is right.. i need hidden by default

    i m using tables on the page..

    <li> tag not required its like href link

    like eg. suppose click here is link when i press on click here that content will show below the click here.. and when i press again that click here that content will hide again.. like that..

  • #6
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts
    oh ok, I understand now.

    <li>'s do NOT support href's you are correct there, but you can put an <a> tag inside of them in order to achieve the href. Would that work for you?

    Code:
    <ul>
       <li>
         <a href"#">Click HERE</a>
       </li>
    </ul>

  • #7
    New to the CF scene
    Join Date
    Feb 2012
    Location
    MUMbai
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by dylanbaumannn View Post
    oh ok, I understand now.

    <li>'s do NOT support href's you are correct there, but you can put an <a> tag inside of them in order to achieve the href. Would that work for you?

    Code:
    <ul>
       <li>
         <a href"#">Click HERE</a>
       </li>
    </ul>
    no not actually, its not work


    <a href="javascript:hideshow(document.getElementById('adiv'))">Click here</a>

    <script type="text/javascript">
    function hideshow(which){
    if (!document.getElementById)
    return
    if (which.style.display=="block")
    which.style.display="none"
    else
    which.style.display="block"
    }
    </script>

    <div id="adiv" style="font:24px bold; display: block">Now you see me</div>
    this is the code i m using but here the "Now you see me" displays before
    which is i dont need.

  • #8
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts
    ohhhh ok, you're using Javascript to define and control how it functions. This thread was posted in the 'HTML & CSS' section so I was trying to solve it using HTML/CSS

  • #9
    New to the CF scene
    Join Date
    Feb 2012
    Location
    MUMbai
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by dylanbaumannn View Post
    ohhhh ok, you're using Javascript to define and control how it functions. This thread was posted in the 'HTML & CSS' section so I was trying to solve it using HTML/CSS


    hahah what a fun!
    its my first thread so its gone here anyway..
    but i need concrete solution what say!

  • #10
    New to the CF scene
    Join Date
    Feb 2012
    Location
    MUMbai
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    anyone anyone..??

    have any info about this issue..


  •  

    Posting Permissions

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