I'm trying to hide and show the contact form (using display:"none" and display:"block") when clicking the button "click me!". I've tried multiple javascript and jquery examples but none of them seem to work for me. It would be nice if the form would slide in and out under the click me button.
Can someone help me?
Visit this link to see my code http://jsfiddle.net/jm2o73f2/9/
function myFunction() {
var x = document.getElementById("hidden");
x.style.
}
body, img, ul, li, div, input, textarea {
margin:0;
padding:0;
}
#footer {
width:100%;
background:#CCC;
clear:both;
margin-bottom:-20px;
}
#footer img {
cursor:pointer;
}
#footer ul {
list-style:none;
width:250px;
padding-top:10px;
margin: 0 auto;
text-align:center;
}
#footer #contact {
width:400px;
margin:auto;
display:block;
background:white;
text-align:left;
}
#footer #contact textarea {
width:250px;
resize:none;
}
#footer #contact input {
width:250px;
margin: 5px 0;
}
#footer #contact input[type="submit"] {
width:100px;
cursor:pointer;
}
<body>
<div id="footer">
<div id="contact">
<ul><li>Vragen? Stuur ons gerust een email.</li><li><button type="button" onclick="myFunction()">Click Me!</button></li></ul>
<div id="hidden">
<ul><li><input type="text" name="naam" id="naam" /></li><li><input type="text" name="email" id="email" /></li><li><textarea name="condolatie" id="condolatie" cols="45" rows="5"></textarea></li><li><input type="submit" name="submit" id="submit" value="Verzend" /></li></ul></div>
</div>
</div>
</body>
A simple solution without seeing your code would be:
$(function(){
$('.revealButton').click(function(){
$('.hiddenDiv').toggle();
});
});
Hope this helps, however, once your code is here I will update this answer :)
UPDATE
Here is a working jQuery version for you: jsFiddle
$(function () {
$('.revealButton').click(function () {
$('#hidden').toggle();
});
});
Also, on your button remove onClick="myFunction()" and add class="revealButton".
and that's it.
UPDATE 2
If you would like a slide animation (as mentioned in the comments) use this: jsFiddleUpdate
$(function () {
$('.revealButton').click(function () {
$('#hidden').slideToggle();
});
});
You need to put your code in head or before the end of body. You then need to check if the element is hidden or not the do the appropriate action
function myFunction() {
var x = document.getElementById("hidden").style;
x.display === 'none' ? x.display = 'block' : x.display = 'none';
// is display none ? set to block else set to none
}
function myFunction() {
var x = document.getElementById("hidden").style;
x.display === 'none' ? x.display = 'block' : x.display = 'none';
}
body, img, ul, li, div, input, textarea {
margin:0;
padding:0;
}
#footer {
width:100%;
background:#CCC;
clear:both;
margin-bottom:-20px;
}
#footer img {
cursor:pointer;
}
#footer ul {
list-style:none;
width:250px;
padding-top:10px;
margin: 0 auto;
text-align:center;
}
#footer #contact {
width:400px;
margin:auto;
display:block;
background:white;
text-align:left;
}
#footer #contact textarea {
width:250px;
resize:none;
}
#footer #contact input {
width:250px;
margin: 5px 0;
}
#footer #contact input[type="submit"] {
width:100px;
cursor:pointer;
}
<div id="footer">
<div id="contact">
<ul>
<li>Vragen? Stuur ons gerust een email.</li>
<li>
<button type="button" onclick="myFunction()">Click Me!</button>
</li>
</ul>
<div id="hidden">
<ul>
<li>
<input type="text" name="naam" id="naam" />
</li>
<li>
<input type="text" name="email" id="email" />
</li>
<li>
<textarea name="condolatie" id="condolatie" cols="45" rows="5"></textarea>
</li>
<li>
<input type="submit" name="submit" id="submit" value="Verzend" />
</li>
</ul>
</div>
</div>
</div>
Using JQuery, you should use:
$("#hidden.isHidden").show().removeClass("isHidden");
to show your element from its ID "hidden", and that to hide it:
$("#hidden").hide().addClass("isHidden");
EDIT:
you could also use this code to detect if your element is hidden:
if ($("#hidden").is(':hidden')) { ... }
and to test if it is displayed:
if ($("#hidden").is(':visible')) { ... }
Related
I am trying to make a survey system using jquery. I need to detect if any input value is empty then get error function. I did it but it is working just one time. How to work my code multiple times?
I have created this
$(document).ready(function(){
$("body").on("click",".createnew", function(){
if ($(".myinput").val().length !== 0) {
if($('.input').length !== 4){
$(".inputs").append("<div class='input' id='surway_poll'><input type='text' class='myinput' id='hoho' placeholder='Write something!'></div>");
} else {
$(".createnew").remove();
}
} else {
alert("You can not leave it blank input field!");
}
});
});
html,
body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
font-family: helvetica, arial, sans-serif;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.container {
position:relative;
width:100%;
max-width:500px;
margin:0px auto;
overflow:hidden;
margin-top:100px;
}
.inputs {
position:relative;
width:100%;
overflow:hidden;
}
.input {
position:relative;
width:100%;
overflow:hidden;
margin-bottom:10px;
}
.myinput{
width:100%;
position:relative;
height:35px;
font-size:14px;
padding:10px;
outline:none;
}
*{
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
.createnew{
position:relative;
float:right;
margin-top:10px;
font-size:14px;
font-weight:600;
background-color:red;
color:#ffffff;
padding:8px;
}
.error {
border:1px solid red !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="inputs">
<div class="input" id="surway_poll">
<input type="text" class="myinput" id="hoho" placeholder="Write something!">
</div>
</div>
<div class="createnew">Create New Input</div>
</div>
In this demo, you can see the create a new input button. So if you click it then you get the alert. Because you didn't write any text from an input. But if you create second input than if it is empty the alert is not working at that time. What I am missing here any one can tell me?
The jQuery val method takes the value of the first matched element only, so it wont work for the second input as it still returns the content of the first.
Solve this by adding :last to the selector:
$(document).ready(function(){
$("body").on("click",".createnew", function(){
if ($(".myinput:last").val().length !== 0) {
$(".inputs").append("<div class='input' id='surway_poll'><input type='text' class='myinput' id='hoho' placeholder='Write something!'></div>");
if($('.input').length >= 4){
$(".createnew").remove();
}
} else {
alert("You can not leave an input field blank!");
}
});
});
html,
body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
font-family: helvetica, arial, sans-serif;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.container {
position:relative;
width:100%;
max-width:500px;
margin:0px auto;
overflow:hidden;
margin-top:100px;
}
.inputs {
position:relative;
width:100%;
overflow:hidden;
}
.input {
position:relative;
width:100%;
overflow:hidden;
margin-bottom:10px;
}
.myinput{
width:100%;
position:relative;
height:35px;
font-size:14px;
padding:10px;
outline:none;
}
*{
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
.createnew{
position:relative;
float:right;
margin-top:10px;
font-size:14px;
font-weight:600;
background-color:red;
color:#ffffff;
padding:8px;
}
.error {
border:1px solid red !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="inputs">
<div class="input" id="surway_poll">
<input type="text" class="myinput" id="hoho" placeholder="Write something!">
</div>
</div>
<div class="createnew">Create New Input</div>
</div>
If you want to check that all inputs are non-blank (to cover the case where a user has cleared a non-blank input), then you can use this if instead:
if ($('.myinput').get().every(s => $(s).val() !== '')) {
NB: See also how in the above snippet, the button is removed as soon as you have four inputs, not later when you click it.
In your original code you used $(".myinput").val().length which only takes first element's value. you need to check for all inputs before appending a new input, not just the first or the last one. This way even if the last input is not empty and some input above is empty, you still need to show the alert.
$(document).ready(function(){
$("body").on("click",".createnew", function(){
var inputs = $(".myinput");
var emptyFields = false;
for (var i=0; i<inputs.length; i++){
if ($(inputs[i]).val().length === 0)
emptyFields = true;
}
if (emptyFields) {
alert("You can not leave it blank input field!");
} else {
if(inputs.length !== 4){
$('.inputs').append("<div class='input' id='surway_poll'><input type='text' class='myinput' id='hoho' placeholder='Write something!'></div>");
} else {
$(".createnew").remove();
}
}
});
});
html,
body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
font-family: helvetica, arial, sans-serif;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.container {
position:relative;
width:100%;
max-width:500px;
margin:0px auto;
overflow:hidden;
margin-top:100px;
}
.inputs {
position:relative;
width:100%;
overflow:hidden;
}
.input {
position:relative;
width:100%;
overflow:hidden;
margin-bottom:10px;
}
.myinput{
width:100%;
position:relative;
height:35px;
font-size:14px;
padding:10px;
outline:none;
}
*{
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
.createnew{
position:relative;
float:right;
margin-top:10px;
font-size:14px;
font-weight:600;
background-color:red;
color:#ffffff;
padding:8px;
}
.error {
border:1px solid red !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="inputs">
<div class="input" id="surway_poll">
<input type="text" class="myinput" id="hoho" placeholder="Write something!">
</div>
</div>
<div class="createnew">Create New Input</div>
</div>
When you select the $('.myinput') it will return an array and if you try and run .val() with the array it will only do it for the first element in the array, you will want to use the .each JQuery function
You could do something like:
function checkInputs(inputs) {
$("input").each(function() {
var element = $(this);
if (element.val() == "") {
return false
}
});
return true
}
if (checkInputs($(".myinput"))) {
if($('.input').length !== 4){
$(".inputs").append("<div class='input' id='surway_poll'><input type='text' class='myinput' id='hoho' placeholder='Write something!'></div>");
} else {
$(".createnew").remove();
}
} else {
alert("You can not leave it blank input field!");
}
Documentation: https://api.jquery.com/each/
I'm fairly new to jQuery and advanced CSS. I was wondering if anyone could take a look at my code and help me get this working. Basically, the gray box on the left is supposed to be fixed and follow you as the page scrolls(that works). Essentially, I want to have the tabs in that gray scroll bar, and have the content of the tabs be displayed in the orange-ish flexbox on the right. I understand that my issue stems from the separation of the <ul> and content divs in HTML, because that's how jQuery reads the tabs. That being said, can anyone help me achieve what I'm looking for. The code is fairly convoluted, so any advice is welcome. I want to learn, so don't hold back!
$(document).ready(function () {
$('#menu').tabs();
$('.ui-tabs-active').removeClass('ui-tabs-active ui-state-active');
});
body {
margin:0;
margin-top:10px;
padding:0px;
}
#wrapper {
border:1px solid black;
display:flex;
margin-left:300px;
margin-right:10px;
}
#scrollBar {
background-color:gray;
height:300px;
width:280px;
position:fixed;
margin:10px;
margin-top:0px;
}
#box1 {
background-color:#ffcc66;
height:1000px;
flex:1;
}
.tabs {
list-style-type: none;
margin:0;
padding:0;
z-index:10;
width:100%;
}
.contentDiv {
width:100%;
padding: 0;
position: relative;
}
.tabs a {
color:black;
position:relative;
text-decoration:none;
}
.tabs li:focus {
outline:none;
color:orange;
}
.tabs a:hover, .tabs a:focus {
color:blue;
}
.tabs a:focus, .tabs a:active {
outline: none;
cursor:pointer;
color:orange;
}
.ui-tabs-active a {
color:orange;
overflow:visible;
}
.contentDiv {
width:100%;
padding: 0;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="scrollBar">
<div id="menu">
<ul class="tabs">
<li>Coding
</li>
<li>Photography
</li>
<li>About Me
</li>
</ul>
</div>
</div>
<div id="wrapper">
<div id="box1">
<div id="coding" class="contentDiv">
<div class="fillerText">
<p>this is my code</p>
</div>
</div>
<div id="photography" class="contentDiv">
<div class="fillerText">
<p>these are my pictures</p>
</div>
</div>
<div id="info" class="contentDiv">
<div class="fillerText">
<p>this is my info</p>
</div>
</div>
</div>
</div>
</body>
Code: http://jsfiddle.net/yk55vufk/
I don't know why you have added this line :
$('.ui-tabs-active').removeClass('ui-tabs-active ui-state-active');
In your code you don't have classes "ui-tabs-active", "ui-tabs-active", "ui-state-active"
some classes and jquery needs be fixed in your code :
Here is fiddle
I have a bit of js toggle code that has worked for me in the past but isn't working after I've altered it for another project. For some reason there is a display:none; property that will not toggle.
It might be because I have moved the div that is to be toggled; originally it came directly after the triggering div but I now have it in a seperate li element.
I'm an amateur coder and a bit confused as to what is going on. Any help is greatly appreciated!
Here's a fiddle:
https://jsfiddle.net/mfqa5ahb/1/
When I inspect the html of the fiddle this shows up as an attribute of the div I want toggled (davebiobox):
element.style {
display: none;
}
And if I temporarily disable this attribute and click the view/hide bio button it toggles properly once and then resets to display:none;
Here's the code:
HTML:
<div class="ourteamlist">
<ul>
<li>
<img src="images/slide4/larry.jpg" class="profilepic" alt="Profile Pic">
<div class="lilbluebox">
<div class="teambox">
<ul>
<li>
<p class="whitetext">Dave Henderson</p>
<h4>CPA, CA, Partner</h4>
</li>
<li>
<div id="daveshowbio" class="viewbio">VIEW BIO</div>
</li>
</ul>
</div>
</div>
</li>
<li>
<div id="davebiobox">
<div class="bioleft">
<p>Dave Henderson</p>
</div>
<div class="bioright">
<p>DAVE DAVE DAVE DAVE DAVE DAVE</p>
</div>
</div>
</li>
</ul>
</div>
CSS:
.ourteamlist{
max-width:1200px;
padding-left:30px;
padding-right:10px;
background-color:#eeeeee;
text-align:center;
margin:0 auto;
margin-left:-1px;
clear:both;
}
.ourteamlist ul li{
display:inline-block;
margin-right:-3px;
text-align:left;
margin-top:1px;
}
.profilepic{
height:205px;
width:299px;
padding-left:0px;
padding-right:1px;
padding-bottom:1px;
}
.lilbluebox{
background-color:#FFFFFF;
margin-top:-5px;
width:299px;
height:80px;
}
.teambox{
padding-left:30px;
padding-top:20px;
width:100%;
}
.teambox ul li{
display:inline-block;
}
.viewbio{
font-size:11px;
font-weight:600;
text-align:right;
margin-right:30px;
color:#888888;
cursor:pointer;
letter-spacing:1px;
}
.teambox ul li a{
text-decoration: none;
}
#davebiobox{
position:relative;
display:inline-block;
max-width:1200px;
height:287px;
background:#FFFFFF;
}
#davebiobox:after{
content:"";
position:relative;
display:block;
width:0;
height:0;
}
.bioleft{
position:relative;
float:left;
width:50%;
}
.bioright{
position:relative;
float:right;
width:50%;
}
JS:
$(document).ready(function () {
$(".viewbio").click(function() {
var $self = $(this);
var originalText = $self.text().trim();
$(".viewbio").text("VIEW BIO");
if (originalText == "VIEW BIO") {
$self.text("HIDE BIO");
}
});
});
$(document).ready(function () {
var $slides = $('#davebiobox').hide();
$('#daveshowbio').show().click(function () {
var $slider = $(this).next("#davebiobox");
if (!$slider.length){
$slider = $(this).closest("#davebiobox");
}
$slides.not($slider).stop(true, true).slideUp();
$slider.stop(true, true).slideToggle(0);
});
});
Thanks alot!
I have given this code some tweaking and came up with this.
$(document).ready(function () {
$(".viewbio").click(function() {
var $self = $(this);
var originalText = $self.text().trim();
$(".viewbio").text("VIEW BIO");
if (originalText == "VIEW BIO") {
$self.text("HIDE BIO");
}
});
var $slides = $('#davebiobox').hide();
$('#daveshowbio').show().click(function () {
var $slider = $("#davebiobox");
$slider.stop(true, true).slideToggle();
});
});
.ourteamlist{
max-width:1200px;
padding-left:30px;
padding-right:10px;
background-color:#eeeeee;
text-align:center;
margin:0 auto;
margin-left:-1px;
clear:both;
}
.ourteamlist ul li{
display:inline-block;
margin-right:-3px;
text-align:left;
margin-top:1px;
}
.profilepic{
height:205px;
width:299px;
padding-left:0px;
padding-right:1px;
padding-bottom:1px;
}
.lilbluebox{
background-color:#FFFFFF;
margin-top:-5px;
width:299px;
height:80px;
}
.teambox{
padding-left:30px;
padding-top:20px;
width:100%;
}
.teambox ul li{
display:inline-block;
}
.viewbio{
font-size:11px;
font-weight:600;
text-align:right;
margin-right:30px;
color:#888888;
cursor:pointer;
letter-spacing:1px;
}
.teambox ul li a{
text-decoration: none;
}
#davebiobox{
position:relative;
display:inline-block;
max-width:1200px;
height:287px;
background:#FFFFFF;
}
#davebiobox:after{
content:"";
position:relative;
display:block;
width:0;
height:0;
}
.bioleft{
position:relative;
float:left;
width:50%;
}
.bioright{
position:relative;
float:right;
width:50%;
}
<div class="ourteamlist">
<ul>
<li>
<img src="images/slide4/larry.jpg" class="profilepic" alt="Profile Pic">
<div class="lilbluebox">
<div class="teambox">
<ul>
<li>
<p class="whitetext">Dave Henderson</p>
<h4>CPA, CA, Partner</h4>
</li>
<li>
<div id="daveshowbio" class="viewbio">VIEW BIO</div>
</li>
</ul>
</div>
</div>
</li>
<li>
<div id="davebiobox">
<div class="bioleft">
<p>Dave Henderson</p>
</div>
<div class="bioright">
<p>DAVE DAVE DAVE DAVE DAVE DAVE</p>
</div>
</div>
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
Basically, my code right now keeps a few of the divs I have on my website hidden and then when you click on a link, it makes the divs appear.
I need help so that it so that when I click one link and a div appears and I click on another link, the previous one disappears.
So let's say I click the link 'About', the div appears, good. Then I click on 'Help' and that div just appears OVER 'About' making things messy.
<script type="text/javascript">
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}}
</script>
^That is my code, here is a sample of it in my website:
<div id="about" class="hidden">
<div class="content3">
<p>This is the about section.</p>
<p>It is currently still being worked on.</p>
</div>
</div>
The class 'content3' is just styling in my css file.
.content3 {
background-color:#FFFFFF;
width:750px;
height:600px;
padding:5px;
padding-left:40px;
margin-top:-650px;
margin-left:auto;
margin-right:auto;
}
UPDATE:
Sorry, I should elaborate more..
I need to be able to basically click a first link and have it show a box of text.
and then click a second link that will hide that box of text associated with the first link and show a new one that is associated with the second link.
This is my FULL code:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript">
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}}
</script>
</head>
<body>
<div class="title">
<p class="text_header">Benjamin Midyette</p>
<p style="margin-top:-50px">Computer/Network Engineer, Web Developer</p>
</div>
<div class="content" align="left">
<p style="padding-top:20px">
This is a link<br><br>
About
</p>
</div>
<div id="Resume" class="content2"></div>
<div id="link" class="hidden" style="position:absolute; left:300px; margin-top:-700px;">
<img alt="A Link" src="pictures/link.png" height="420" width="420">
</div>
<div id="about" class="hidden">
<div class="content3">
<p>This is the about section.</p>
<p>It is currently still being worked on.</p>
</div>
</div>
</body>
</html>
CSS:
body {
background-image:url('http://www.nsgaming.us/pictures/nebula.png');
background-repeat: no-repeat;
background-size: 100% auto;
background: url('http://www.nsgaming.us/pictures/nebula.png') fixed 100% 100%;}
/*Text styling*/
.text_header {
font-size:72px
}
.title {
margin-top:-30px;
margin-left:auto;
margin-right:auto;
text-align: center;
color:#ffffee;
width:600px;
border-radius:8px;
background-color:#000000;
background:rgba(0,0,0,.9);
padding-bottom:1px;
}
/*Top Button styling*/
.button {
border:2px solid black;
background: #3B3B3B; /*#8C8C8C*/
padding: 3.5px 5px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
color: white;
font-size: 18px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
text-decoration: none;
}
.button:hover {
background: #770819;
color: #ffffff;
text-decoration:none;}
.button:active {
background: #590819;}
.content {
margin-top:40px;
border: 1px solid black;
border-radius:8px;
Opacity:0.8;
background:#222222;
width:175px;
height:400px;
padding-left:20px;
padding-top: 0px;}
.content2 {
background-color:#222222;
border-radius:4px;
width:800px;
height:650px;
padding:5px;
padding-left:40px;
margin-top:-401px;
margin-left:auto;
margin-right:auto;
}
.content3 {
background-color:#FFFFFF;
width:750px;
height:600px;
padding:5px;
padding-left:40px;
margin-top:-635px;
margin-left:auto;
margin-right:auto;
}
.hidden {
display: none; }
.unhidden {
display: block; }
container {
align:right;}
opener {
align:left;}
You could do like this, if you want to display and hide particular div on click of button.
<style>
.hidden{
display:none;
}
.unhidden{
display:block;
}
</style>
<script type="text/javascript">
function unhide(clickedButton, divID) {
var item = document.getElementById(divID);
if (item) {
if(item.className=='hidden'){
item.className = 'unhidden' ;
clickedButton.value = 'hide'
}else{
item.className = 'hidden';
clickedButton.value = 'unhide'
}
}}
</script>
<body>
<div id="about" class="hidden">
<div class="content3">
<p>This is the about section.</p>
<p>It is currently still being worked on.</p>
</div>
</div>
<input type="button" onclick="unhide(this, 'about') " value="unhide">
</body>
UPDATE: Pass the other div id which you want to make disappear on click of div one. Please update your code with below's code.
SCRIPT
<script type="text/javascript">
function unhide(divID, otherDivId) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
document.getElementById(otherDivId).className = 'hidden';
}
</script>
HTML
<p style="padding-top:20px">
This is a link<br><br>
About
</p>
I don't understand your question properly. But if you are trying to make different div elements visible upon clicking different links, then this is what you should do:
<div id = "anchor-div">
<ul>
<li> <a id="about-anchor" href="javascript:;"> About</a> </li>
<li> <a id="help-anchor" href="javascript:;"> Help </a> </li>
</ul>
</div>
<div id="content-div">
<div id="about-content"></div>
<div id="help-content"></div>
</div>
$(document).ready(function(){
//if you wish to keep both the divs hidden by default then dont forget to hide //them
$("#help-content").hide();
$("#about-content").hide();
$("#about-anchor").click(function(){
$("#help-content").hide();
$("#about-content").show();
});
$("#help-anchor").click(function(){
$("#help-content").show();
$("#about-content").hide();
});
});
Also don't forget to add jQuery library.
I must have a little design in javascript.
I have a menu with 5 entrys and only 1 HTML-page.
So I will have a content-div and enabled and disabled different static content in it, each menu-entry is another content.
I tried with 5 divs and disable 4 of them and enable 1, but the element under each other means every div is like a - enabled or not, so the "content" is moving then.
Hope its understandable.
Here is the code so far:
<html><head><title>Des Einsame-Katerchen's kleine Homepage</title>
<style type="text/css">
a:link { font-weight:bold; color:blue; text-decoration:none; }
a:visited { font-weight:bold; color:blue; text-decoration:none; }
a:focus { font-weight:bold; color:blue; text-decoration:none; }
a:hover { font-weight:bold; color:blue; text-decoration:line-through; }
a:active { font-weight:bold; color:blue; text-decoration:none; }
h1:focus { background-color:red; }
h1:hover { background-color:silver; }
h1:active { background-color:green; }
</style>
<script>
function an(id)
{
document.getElementById('start').style.visibility = 'hidden';
document.getElementById('start').style.height = '0px';
document.getElementById('me').style.visibility = 'hidden';
document.getElementById('me').style.height = '0px';
document.getElementById('rpg').style.visibility = 'hidden';
document.getElementById('rpg').style.height = '0px';
document.getElementById('musik').style.visibility = 'hidden';
document.getElementById('musik').style.height = '0px';
document.getElementById('screens').style.visibility = 'hidden';
document.getElementById('screens').style.height = '0px';
document.getElementById(id).style.visibility = 'visible';
document.getElementById(id).style.height = '500px';
}
</script>
</head>
<body style=" " >
<div style="width=100%; text-align:center; border: 1px red solid; height:40px;">
<div style="float:left; width:100px;"><a href="#" OnClick="an('start')" >Startseite</a></div>
<div style="float:left; width:100px;"><a href="#" OnClick="an('me')" >Über mich</a></div>
<div style="float:left; width:100px;"><a href="#" OnClick="an('rpg')" >RPG-Chars</a></div>
<div style="float:left; width:100px;"><a href="#" OnClick="an('musik')" >Musik</a></div>
<div style="float:left; width:150px;"><a href="#" OnClick="an('screens')" >Knuddels-Screens</a></div>
</div>
<br>
<div id="start" style="border:1px red solid; width:500px; height:500px; overflow: visible; " >
a
</div>
<div id="me" style="border:1px red solid; width:500px; height:0px; overflow: visible; visibility: hidden; " >
b
</div>
<div id="rpg" style="border:1px red solid; width:500px; height:0px; overflow: visible; visibility: hidden; " >
c
</div>
<div id="musik" style="border:1px red solid; width:500px; height:0px; overflow: visible; visibility: hidden; " >
d
</div>
<div id="screens" style="border:1px red solid; width:500px; height:0px; overflow: visible; visibility: hidden; " >
e
</div>
</body>
Try
style.display = 'none';
It will stop affecting other elements place and layouting.
If you haven't already, I would recommend checking out jQuery for DOM manipulation: http://jquery.com/. In your case, the html() method, http://api.jquery.com/html/, or the hide() method, http://api.jquery.com/hide/.
Good luck!
Take a look at Tabtastic for a decent implementation of this.