What I just gave you was css, so that goes in the style sheet.
If you want any element (a button, in this case) to have a specific css style rule that won’t be applied to other elements of the same type, the best way would be to give it a unique id. You are already using ids for your divs, by the looks of it - it is no different for a button. Just specify the id in the tags like so:
<input type=“button” id=“myButton” etc…
Then refer to it in the css using a hash tag:
#myButton {
<insert css rules here>
}
Any style rules you put in those brackets will only be applied to the element that has the specified id.
Regarding your other problem, the most obvious way to make the text disappear/reappear in the div boxes would involve javascript. All the code that follows should be put within <script> tags.
First, create two variables that will contain the text you want to appear in the divs. These variables are called STRINGS and the values assigned to them must be within quotation marks.
var leftBoxText = “blah blah blah…”
var rightBoxText = “blah, blah, blah…”
Then create two more variables, called BOOLEANs. A boolean is a variable that can only have two values - true or false.
var leftTextDisplayed = true;
var rightTextDisplayed = true;
If the page is initially loaded with text in the boxes, or
var leftTextDisplayed = false;
var rightTextDisplayed = false;
if it isn’t.
Note that in this case the words false or true should NOT be enclosed in quotation marks.
Next you want to put the div boxes themselves into javascript variables. If I am to take the names you are using below literally that would be:
var leftBox = document.getElementById(“left”);
var rightBox = document.getElementById(“right”);
Use that exact syntax and do not insert spaces between the words!
Now you’ll need a function to control each box. I’ll only write the one that will refer to the left, and I’m sure you can make the necessary adjustments for the right one.
function () leftTextControl {
Here we use an ‘if’ statement to see if the text should be appearing or hiding - we use the boolean variables we created earlier to tell. If the boolean is set to ‘true’ the code in the ‘if’ portion of the statement will execute, otherwise the code in the ‘else’ portion will.
if(leftTextDisplayed) {
[I] innerHTML is a javascript expression that allows you to write text or code directly into the html element that is specified in the variable. Here we are telling the browser that there should be no content in the specified variable. After doing this we change the value of the boolean to false, as there will now be no text displaying.[/I]
leftBox.innerHTML = "";
leftTextDisplayed = false;
} else {
Here we are instructing the browser to fill the ‘leftBox’ element with the text we specified in the ‘leftBoxText’ string variable. After this we again change the value of the boolean.
leftBox.innerHTML = leftBoxText;
leftTextDisplayed = true;
}
}
Here’s that code again without the comments in between:
function () leftTextControl {
if(leftTextDisplayed) {
leftBox.innerHTML = “”;
leftTextDisplayed = false;
} else {
leftBox.innerHTML = leftBoxText;
leftTextDisplayed = true;
}
}
Finally you will need a reference to that function in the button you want to use to make the text appear/disappear. You do that through a property yo ucan assign to any html element (not just buttons) called ‘onclick’. So in the html that would be:
<input type=“button” onclick=“javascript:leftTextControl()” etc…
Then add any other properties you want. When the user clicks this button, if you’ve done everything correctly, the text should appear or disappear.
Note that javascript, unlike html, is case sensitive. The placement of capitals is important!
Well, hope that helps.
