|
CSS - Hide/show Text Using Css
I am very new to css. I am trying to show and hide text by clicking a button. My intention is to use this in a threaded discussion board.
For example I'd like the topics to be displyed when the page loads 1) topic 1 (Open/Close) 2) topic 2 (Open/Close) On hitting the Open button this would be something like this: 1) topic 1 (Open/Close) ---message 1 ---message 2 ---message 3 ---message 4 2) topic 2 (Open/Close) Hope someone can suggest me an answer or point me to one. Thanks Similar TutorialsHi there, Was wondering if anyone had a solution with what I am trying to achieve if at all possible. I've been playing with a drop down that opens onclick with pure css. What I am trying to accomplish to have the dropdown close automatically when pointer is not on the dropdown menu. I know this is possible with jQuery but get this, I am trying to accomplish this in pure css. My code is below which is pure css which again works onclick to open the 2nd tab. Again, I am trying to achieve an automatic close behavior such as with a hover but not by using the hover class or javascript. <!doctype html> <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ --> <!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]--> <!--[if IE 7 ]> <html class="no-js ie7" lang="en"> <![endif]--> <!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]--> <!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]--> <head> <meta charset="utf-8"> <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the .htaccess --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <!-- Mobile viewport optimized: j.mp/bplateviewport --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects --> <script src="js/libs/modernizr-1.7.min.js"></script> <style> div.items ul:not(:target) {display:none;} div.items ul:target {display:block;} .tabs { float:left; clear:none; width:200px; height:30px; border:solid 1px #cccccc; padding:10px; background:#000000; } a { text-decoration:none; } .tabs a { float:left; margin:8px 5px 5px 5px; color:#ffffff; } ul { width:222px; float:left; clear:both; padding:10px 0px 10px 0px; margin:-8px 0px 0px 222px; line-height:35px; list-style:none; } li { border-left:#cccccc solid 1px; border-right:#cccccc solid 1px; border-bottom:#cccccc solid 1px; } ul li a { margin-left:15px; } </style> </head> <body> <!-- Start Tabs --> <div class="tabs"> <a href="#">Dashboard</a> </div> <div class="tabs"> <a href="#item2">Data & Reports</a> </div> <div class="tabs"> <a href="#">Data Archives</a> </div> <!-- End Tabs --> <!-- Start 2nd Tabs Content --> <div class="items"> <ul id="item2"> <li> <a href="#">Sales By Device</a> </li> <li> <a href="#">Delivery</a> </li> <li> <a href="#">Revenue</a> </li> <li> <a href="#">Sales By Purchase Type</a> </li> <li> <a href="#">Data Archives</a> </li> </ul> </div> <!-- End 2nd Tabs Content --> </body> </html> I'm looking for a way to show / hide a DIV triggered buy mousing over / clicking on a tab. The action will not navigate away from the page, just show / hide the DIV. I found this script: http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm But it seems like a lot of JS overhead. Is there a simpler way? I need a space where the user can select from a large group of options, so I thought I'd use a <div> and have a link saying OPEN which would make the <div> visible (whereupon the user could select choices, then close the <div>) Problem is, I am not sure exactly how to do this. I can make the <div> with the id and everything, but I am not sure how to make the div visible from the initial page. Is it something like document.theDiv.style.visibility="visible"; How do I put that into a link that the user can click to show the div? I am normally quite good at css but I have hit a wall. I want a 2 column layout. The left column will be alot smaller than the right (one is for navigationa dn the other for content). I want to be able to show and hide the left column. When I hide it I want the rightcolumn to take up the space that the left column took up. Incase my description was confusion I have drawn this simple picture. Picture I am wanting to do this with just divs, no tables. And very little or no javascript. Thankyou. I'm using a mixture of javascript and css to hide/show a div on my page. This all works fine in both firefox and ie but ie screws with the layout only after the javascript fires the first time. Click here to see what I mean. Notice the change in padding on the left div that is being shown/hidden (only in IE, firefox has no problem). Also, If you click the button too fast in IE, the browser does not accept the click. It seems as though IE needs a second to rest after it runs the javascript. Here is the css: Code:
#leftcol{
width:15%;
float:left;
padding:0 2%;
margin:0.5% 0;
border:0.1em solid #0af;
}
#content{
background:#eee;
padding:0 2%;
margin:0.5% 0 0 20%;
}
the javascript: PHP Code: function toggle_left_col() { if (document.getElementById) { var leftNav = document.getElementById('leftcol'); var content = document.getElementById('content'); if(leftNav.style.display == 'none') { leftNav.style.display = 'block'; content.style.marginLeft = '20%'; }else{ leftNav.style.display = 'none'; content.style.marginLeft = '0'; } } } and the markup: PHP Code: <p><input type="button" onclick="toggle_left_col();" value="show/hide" /></p> <div id="leftcol"> <h3>Lorem Ipsum</h3> <p>Integer tempor nunc. Phasellus luctus odio nec magna. In dapibus malesuada diam. Pellentesque ultricies, augue id porta faucibus, elit sem varius sem, quis mollis mi massa quis leo. Nulla facilisi. Sed porttitor consectetuer nisl. Nullam iaculis rhoncus urna. Praesent euismod. Sed vitae ligula. Pellentesque quis magna nec ligula feugiat fringilla. Etiam sodales, mi at laoreet iaculis, odio elit nonummy velit, ut venenatis est dolor in felis.</p> </div> <div id="content"> <h3>Lorem Ipsum</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam molestie feugiat leo. Ut eget mi. Nullam sagittis. Suspendisse ut tellus ac massa ultricies sodales. Fusce sagittis. Vivamus ante. Donec ante leo, feugiat ut, elementum sit amet, dictum non, ligula. Donec auctor ipsum. Suspendisse potenti. Curabitur posuere fermentum enim. Duis tempus lobortis ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed ullamcorper. Mauris velit.</p> <p>Sed fermentum condimentum augue. Pellentesque quis velit et metus eleifend tempor. Praesent in orci. Morbi pede enim, rutrum quis, dapibus eu, dapibus ac, wisi. Sed non mauris quis eros tincidunt elementum. Aliquam vulputate rutrum wisi. Nulla accumsan, nunc sit amet tincidunt viverra, urna neque lacinia turpis, dapibus consequat dui tellus tincidunt lacus. Nunc sit amet mi vel diam varius imperdiet.</p> </div> Any ideas? HI Guys, Is there a way to do the following with just css? Code: <script language="javascript">
function ShowContent(d) {
document.getElementById(d).style.display = "block";
}
function HideContent(d) {
document.getElementById(d).style.display = "none";
}
</script>
// above code in header Code: <fieldset class="radio" style="padding-left: 20px;">
<legend><strong>Postal/Billing Address</strong></legend><br /><br />
<label for="Mixed1">
<input type="radio" name="postal_yn" onclick="HideContent('shaddress');"> Same
</label>
<label for="Mixed1">
<input type="radio" name="postal_yn" onclick="ShowContent('shaddress');"> Different
</label>
<div id="shaddress" style="display:none;padding-left: 20px;">
<label for="postal_address">
<br /><span style="line-height:25px;">Please enter your postal address:</span><br />
<textarea type="text" name="postal_address" rows="3" cols="25"><?php if(isset($_POST['postal_address'])) echo $_POST['postal_address'];?>
</textarea>
</label>
</div>
</fieldset>
Hi guys, I hope I have posted this in the right category? Can anyone advise me on how I could hide this form field using some sort of yes no radio checkbox Postal Address - same / different ** If different is selected the field below is displayed. PHP Code: <label for="postal_address"> Postal Address:<br /> <textarea type="text" name="postal_address" rows="3" cols="25"><?php if(isset($_POST['postal_address'])) echo $_POST['postal_address'];?> </textarea> </label> Any help would be greatly appreciated. I've got a basic search and advanced search form that I switch between using divs and css properties. Theres probably a much better way todo it, but here is how I have gone about it: Code:
//Basic search form within a td on the right of page
<div id="basic_search" style="position:relative;">
<table width="100%" border="0" cellpadding="2" cellspacing="2">
<tr>
<td align="left" valign="top"><h2 class="headings">Basic Search</h2></td>
</tr>
......
</table>
</div>
<div id="advanced_search" style="position:absolute; visibility: hidden; ">
<table width="100%" border="0" cellpadding="2" cellspacing="2">
<tr>
<td align="left" valign="top"><h1 class="headings">Advanced search </h1></td>
</tr>
..............
</table>
</div>
I then use the following javascript to hide the basic search and show the advanced search in its place (And pushing down anything below it, as the advanced search is a longer form) Code:
onclick="MM_showHideSearch('advanced_search','relative','show');MM_showHideSearch('basic_search','absolute',' hide')"
MM_show_HideSearch is a modified version of the common MM_showHideLayers from dreamweaver Code:
function MM_showHideSearch(div_id,position,v){
obj = MM_findObj(div_id);
if (obj.style) {
obj=obj.style;
v=(v=='show')?'visible':(v=='hide')?'hidden':v;
obj.visibility=v;
obj.position=position;
}
}
This works fine in Firefox and almost works in ie. In IE it hides the basic search, shows the background of the advanced search, but none of the elemements. However if I put an alert(), function within the showHideSearch function (Without changing anything else), then the change works perfectly in IE. (I was using an alert function in testing) Is there anything else I could call in IE to have the same effect? Mistake. Sorry! Is it possible to expand a table with DIV's using CSS hidden/visible? If I select an option from a select field in one row, to have a hidden select field appear in the row directly below, moving the contents directly below down a row? Expanding the table when a hidden row becomes visible. Or should I just use DIV's and forget about using the table format? please look at the image below I think, the image I sent will be able to explain what my problem is Code: <script>
function SetState(obj_checkbox)
{ if(obj_checkbox.checked)
{
document.getElementById('NwLink').style.display = "block";
return true;
}
else
{
document.getElementById('NwLink').style.display = "none";
return true;
}
}
</script>
<form name="form">
<table width="600">
<tr>
<td>
News:<br>
<input type="checkbox" onclick="SetState(this)">
</td>
</tr>
<tr id="NwLink" style="display: none;">
<td>
Intro text:<br>
<input type="Text" name="NewsIntroText">
</td>
</tr>
<tr>
<td>
and here is some more text
</td>
</tr>
</table>
</form>
Works in IE, but not NN: Code:
<SCRIPT LANGUAGE="javascript"> <!--
function doSection(secNum){
//display the section if it's not displayed; hide it if it is displayed
if (secNum.style.display=="none") {
secNum.style.display=""
} else {
secNum.style.display="none"
}
}
--> </SCRIPT>
And here is the code to make it happen: Code: <A HREF="javascript:void(0)" onclick="doSection(Sec1)">What factors affect the color of meat and poultry?</A> <DIV ID="Sec1" STYLE="display: none"> <P>Myoglobin, a protein, is responsible for the majority of the red color, in meat and poultry. Myoglobin does not normally circulate in the blood but is fixed in the tissue cells. When bruising occurs during gathering, myoglobin circulates in the blood, and a small amount can be found in the meat after processing. This purplish color can leave small dark spots that resemble bruising. Exposure to light in the meat case can also affect color. (USDA) </P> </DIV> Anybody see what I did wrong? Any good links to CSS in NN, possibly used with js? My problem is pretty obvious when you look at the following link. Currently only the first three links in the list in the middle work. (Firewall, power backups, tape backup system): http://www.zacwittedesign.com/jeremy/network.html They show/hide correctly, but I need them to end up on top of eachother. I don't know how to do this without using the absolute positioning, but I can't use that because it needs to be reletive to the rest of the page. Can't I somehow anchor the layers at the same point? Thanks, Zac I am using a table with 5 rows and 5 columns of data. First i hide <td>'s using style.display="none"; When i use style.display=""; for showing up <td>'s , in IE its working fine, but in Netscape 7.1 (Windows) the columns get collapsed on one another. Can anybody know why this happens ? Is there any other way it can solved. Need help pls. I'm working on a tabbed content Interface to be used at the bottom of some pages in a CMS. Works in FF but only partially in IE (sometimes). The tabbed portion of the interface is set up with CSS and background images. In IE im having trouble getting them to show properly but only on 1 layer. When the Javascript changes the display property of the div it brings up the appropriate background image. But only on 3 of the 4 content divs. The fourth panel "Specs" or the div#panel4{} is displaying ok, except that it will not bring up the image for the div#TopRight4 Here is the code, and a link to a test page so that you can view it in action... any ideas? html4strict Code: Original - html4strict Code <html> <style type="text/css"> <!-- body {margin:0;padding:0;} div#container {position:absolute;left:20px;top:20px;width:631px;} div#panel2, div#panel3, div#panel4 {display:none;} div#panel1 {display:block;} div#panel_style{margin-top:5px;} div.panel_links1{width:131px;float:right;text-align:center;line-height:47px;vertical-align:50%;} div.panel_links2{width:131px;float:right;text-align:center;lineheight:47px;vertical-align:50%;} div.panel_links3{width:131px;float:right;text-align:center;lineheight:47px;vertical-align:50%;} div.panel_links4{width:131px;float:right;text-align:center;lineheight:47px;vertical-align:50%;} div.panel_links a{text-decoration:none;} div.panel_links a:hover{color: gray;text-decoration:underline;} div.panelTopLeft{ background-image:url(images/CP_top_left.gif); width:100%; height:47px; float:left; } div.panelTopRight1{ background-image:url(images/CP_Four_Tab4.gif); background-repeat:no-repeat; background-position: 100% 0; width:533px; height:47px; line-height:47px; float:right;} div.panelTopRight2{ background-image:url(images/CP_Four_Tab3.gif); background-repeat:no-repeat; background-position: 100% 0; width:533px; height:47px; line-height:47px; float:right;} div.panelTopRight3{ background-image:url(images/CP_Four_Tab2.gif); background-repeat:no-repeat; background-position: 100% 0; width:533px; height:47px; line-height:47px; float:right;} div.panelTopRight4{ background-image:url(images/CP_Four_Tab1.gif); background-repeat:no-repeat; background-position: 100% 0; width:533px; height:47px; line-height:47px; float:right;} div.panelCenterLeft{ background-image:url(images/CP_center_left.gif); background-repeat:repeat-y; width:100%; float:left; height:100%; } div.panelCenterRight{ background-image:url(images/CP_center_right.gif); background-repeat:repeat-y; background-position:100% 0; width:100%;height:100%; float:right; } div.panelLowLeft{ background-image:url(images/CP_low_left.gif); background-repeat:no-repeat; width:631px; float:left;} div.panelLowRight{ background-image:url(images/CP_low_right.gif); background-repeat:no-repeat; width:6px; height:6px; float:right;} --> </style> <script language="JavaScript" type="text/javascript"><!-- var divArray = new Array('panel1','panel2','panel3','panel4'); function setDisplay(objectID){ for ( var i = 0; i < divArray.length; i++ ) { var d = document.getElementById(divArray[i]); d.style.display = (d.id==objectID)?'block':'none'; } } --></script> </head> <body> <div id="container"> <div id="panel1"> <div class="panelTopLeft"> <div class="panelTopRight1"> <div class="panel_links1"><a href="javascript:void('')" onclick="setDisplay('panel4');">Specs</a></div> <div class="panel_links2"><a href="javascript:void('')" onclick="setDisplay('panel3');">Swatches</a></div> <div class="panel_links3"><a href="javascript:void('')" onclick="setDisplay('panel2');">Features</a></div> <div class="panel_links4">Options</div> </div> </div> <div class="panelCenterRight"> <div class="panelCenterLeft"><br /> <p>Blah Blah Blah</p> </div> </div> <div class="panelLowLeft"> <div class="panelLowRight"> </div> </div> </div> <div id="panel2"> <div class="panelTopLeft"> <div class="panelTopRight2"> <div class="panel_links1"><a href="javascript:void('')" onclick="setDisplay('panel4');">Specs</a></div> <div class="panel_links2"><a href="javascript:void('')" onclick="setDisplay('panel3');">Swatches</a></div> <div class="panel_links3">Features</div> <div class="panel_links4"><a href="javascript:void('')" onclick="setDisplay('panel1');">Options</a></div> </div> </div> <div class="panelCenterRight"> <div class="panelCenterLeft"><br /> <p>More Blah Blah Blah</p> </div> </div> <div class="panelLowLeft"> <div class="panelLowRight"> </div> </div> </div> <div id="panel3"> <div class="panelTopLeft"> <div class="panelTopRight3"> <div class="panel_links1"><a href="javascript:void('')" onclick="setDisplay('panel4');">Specs</a></div> <div class="panel_links2">Swatches</div> <div class="panel_links3"><a href="javascript:void('')" onclick="setDisplay('panel2');">Features</a></div> <div class="panel_links4"><a href="javascript:void('')" onclick="setDisplay('panel1');">Options</a></div> </div> </div> <div class="panelCenterRight"> <div class="panelCenterLeft"><br /> <p>Still Some more Blah Blah Blah</p></div> </div> <div class="panelLowLeft"> <div class="panelLowRight"> </div> </div> </div> <div id="panel4"> <div class="panelTopLeft"> <div class="panelTopRight4"> <div class="panel_links1">Specs</div> <div class="panel_links2"><a href="javascript:void('')" onclick="setDisplay('panel3');">Swatches</a></div> <div class="panel_links3"><a href="javascript:void('')" onclick="setDisplay('panel2');">Features</a></div> <div class="panel_links4"><a href="javascript:void('')" onclick="setDisplay('panel1');">Options</a></div> </div> </div> <div class="panelCenterRight"> <div class="panelCenterLeft"><br /> <p>And the last bit of Blah Blah Blah</p></div> </div> <div class="panelLowLeft"> <div class="panelLowRight"> </div> </div> </div> </div> </body> <html> Test Page Hello. I'm nesting inputs within labels to enable me to position the inputs underneath their labels. (I use relative positioning for the labels and absolute positioning to move the inputs underneath and slightly to the right.) For one label I don't want any text to appear. I could use a non-breaking space but I'd ideally like to keep the label but just not show the text. But I can't hide it because it contains the input What would be a good way to approach this? (I've given the label a class to identify it/them.) Code: <form id="myForm" method="">
<label>Email<input type="text" id="txtEMail" /></label>
<label>Password<input type="text" id="txtPWord" /></label>
<label class=" lblHidden " >Login<input type="image" src="images/login.jpg" id="btnLogin" /></label>
</form>
[It occurred to me to set the width to 0 but I'm not so keen on this approach and it might interfere with my positioning.] Andy. PS I could post my css if it's useful (?). Edited: width:0px doesn't do anything anyway, because it contains an image. I know that this is probably a simple solution, but I have been looking at the coding so long I cant figure it out. What we are trying to do is this. We wanted to create a FAQ page that was just a little bit different than the norm, so instead of just having links, we wanted links, that if clicked would open under the question with the answer. I found some code online and now cannot remember where I got it, for a horizontal menu using only css. I altered it some and got it to work correctly in IE. I know that this is probably because IE allows major screw ups, but most of the users are IE. Foxfire on the other hand does not show the same way. I can handle it not behaving the same, if I could just get it to work at all. The code is located at sky.prohosting.com/jade1977/htmlFiles/faq.shtml If someone can alter this to work in mozilla or give me alternate code that work similar I will be yours for life. Thanks!!!!!!!! Hey all, I'm trying to make some links using the normal list method, and have the link class leak the image. Right now nothing is showing up...no text, no button/image...nothing. It's rather baffling to me, because I have pretty much the same code working on a different page. I can't see anything that would cause this. I would very much appreciate it if you have a look at my code and see if you can see something I missed. CSS: Code:
.box1{
width:900px;
height:700px;
background-image:url(bg.jpg);
}
#links{
width:853px;
height:31px;
margin: 0 auto;
text-align:center;
line-height:0;
display: block;
overflow: hidden;
text-decoration: none;
text-indent: -99999px;
font-size: 0.0;
line-height: 0.0;
background-repeat:no-repeat;
}
#links li{
float: left;
list-style: none;
}
a.link1{
width:185px;
height:31px;
display:block;
background-image:url(bg.gif);
background-position: 592 25px;
}
HTML: Code:
<div class="box1">
<ul id="links">
<li><a href="#" class="link1" title="Job Description">Job Description</a></li>
<li><a href="#" class="link1" title="Home">Job Description</a></li>
<li><a href="#" class="link1" title="Home">Job Description</a></li>
<li><a href="#" class="link1" title="Home">Job Description</a></li>
</ul>
</div>
Thanks much Hey On some of my pages i use the following code to show some images in the body of my page : PHP Code: <div class="container"> <p><img src="../images/schools/leadership.jpg" width="100" height="100" class="leftimage" /><a href="centre.php?centerName=Ellel Scotland">Ellel Scotland</a> was established in 2000. It now operates from Blairmore House and has a particular emphasis on prayer.</p> </div> Now the css code for .container is Code: .container{
width:99%;
float:right;
}
and .leftimage Code: .leftimage{
float: left;
margin-right: 10px;
margin-bottom:10px;
border: 1px solid #000000;
clear:left;
When I test my page in FireFox it works fine. But when i test it in IE, any of my text that is not in a .container div disappears. It is on the page because you can highlight it with the mouse and then it shows until you highlight something else that is in a container tag. And then it disapears again. It is the most random thing i have ever seen. I cat figure out why. Has anyone come across this and can anyone help? Below is a little more code for a bigger picture and the text sais what shows and what does not! PHP Code: <div id="content"> <div class="container"> <p><img src="../images/homepage/regional_9_week.jpg" height="" class="leftimage" /></p> </div> <h1>This Disapears</h1> <p>This text and the image above disapears</p> <p>This also disapears</p> <div class="container"> <p><img src="../images/schools/shortcourses.jpg" width="100" height="100" class="leftimage" />This text does show up and so does the image to the left</p> <p>This shows up<a href="listing.php">click here.</a> </p> </div> </div> Hello, Can search engine see a hide H1 tag? Quote: h1 {display:none;} |
|||||||