Hide and Show text/content - pls Help!

[vinayedit]

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

[dylanbaumannn]

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

<ul>
   <li class="show">
     <p>item shown</p>
   </li>
   <li class="hide">
      <p>item hidden</p>
   </li>
</ul

CSS

.show{ display: block;}	
.hide{ display: none;}

[vinayedit]

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

[dylanbaumannn]

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/

[vinayedit]

Originally Posted by dylanbaumannn

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..

[dylanbaumannn]

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?

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

[vinayedit]

Originally Posted by dylanbaumannn

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?

<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.

[dylanbaumannn]

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

[vinayedit]

Originally Posted by dylanbaumannn

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!

[vinayedit]

anyone anyone..??

have any info about this issue..