I am trying to create a disappearing drop down menu that disappears into the top of the page, and you can only see the word 'open'. This opens the the menu, the word open changes to the word close which when clicked makes the menu disappear again. Help would be much appricated.
<html>
<head>
<title>dropdown</title>
<link rel="stylesheet" type="text/css" href="dropdown_css.css">
<script type = "text/javascript">
function navagate(menu) {
var panel = document.getElementById(menu),maxh = "-362px", navg = document.getElementById('navag');
if (panel.style.marginTop == maxh){
panel.style.marginTop = "0px";
navag.innerHTML = "Close";
}
else {
panel.style.marginTop = maxh;
navag.innerHTML = "Open";
}
}
window.onload = function(){panel.style.marginTop = "-362px";}
</script>
<body>
<div id = "panel">
<ul>
<li>CIT</li>
<li>Blackboard</li>
<li>Mcomms</li>
<li>Tables</li>
<li>Exams</li>
</ul>
<div id ="sections_button">
<a onclick = "navigate ('panel')" id = "navag">Open</a>
</div>
</div>
</body>
</body>
</html>
#panel {
width : 160px;
height: 130px;
background-color: gray;
margin-left: 30px;
margin-top:20px;
}
#panel li {
list-style-type: none;
}
Here, I've made a JS fiddle that may help you out: http://jsfiddle.net/942z0nhh/ I did not play around with the styling at all.
A few things I noticed:
You're making some mistakes that I think you wouldn't make if you indented properly. Take a look here, where you closed your body twice:
<a onclick = "navigate ('panel')" id = "navag">Open</a>
</div>
</div>
</body>
</body>
Second, you have some spelling mistakes:
<a onclick = "navigate ('panel')" id = "navag">Open</a>
vs
function navagate(menu) {
You can see there that your function would never be called because of it.
Lastly, your 'open' and 'close' a here:
<a onclick = "navigate ('panel')" id = "navag">Open</a>
Was within the div your function was overwriting. The function would change it to 'close'- but then it wouldn't be visible to the user anyway! I moved it above, which I hope makes sense.
Please let me know if you have any other questions, or if I misunderstood.
You could also do it only with CSS. It's the "css checkbox hack". I'm having it not like you want it but it is pretty close. Changing the text from open to close should be also possible.
At the moment, I don't know how to move the open/close label below the ul list.
*, html {
padding: 0px;
font-family: sans-serif;
}
/* Checkbox Hack */
input[type=checkbox] {
position: absolute;
display: none;
}
label {
display: block;
cursor: pointer;
content: "close";
}
/* Default State */
#wrapper {
display: block;
background: gray;
color: white;
text-align: center;
}
/* Toggled State */
input[type=checkbox]:checked ~ #menu {
display: block;
background: lightgray;
color: black;
top:0px;
}
.menuToggle ul{
display: none;
width: 100%;
}
#menu {
padding-top: 5px;
margin: 0px;
list-style: none;
}
<div id="wrapper">
<div class="menuToggle">
<label for="toggle-1">open</label>
<input type="checkbox" id="toggle-1"/>
<ul id="menu">
<li>CIT</li>
<li>Blackboard</li>
<li>Mcomms</li>
<li>Tables</li>
<li>Exams</li>
</ul>
</div>
</div>
With jQuery you could do it like the example below.
I think it is now almost like you wanted it. Maybe some styling improvements are required.
With the css hack I couldn't manage the text change. With js you have more possibilities. You could also improve/modify the animations.
$(function() {
var $menuButton = $('#openButton');
var $menu = $('#menu');
var btnToggleAnim = function() {
$menuButton.animate({opacity: 'toggle'}, "fast");
};
var menuToggleAnim = function() {
$('#menu').animate({
height:'toggle',
//opacity: 'toggle'
}, { duration: "slow" });
};
$('#closeButton,#openButton').on('click', function() {
menuToggleAnim();
btnToggleAnim();
});
});
*, html {
padding: 0px;
font-family: sans-serif;
}
a {
text-decoration:none;
}
#openButton {
display:block;
background: gray;
color: #fff;
text-decoration: none;
border: 2px solid lightgray;
border-radius: 15px;
}
#closeButton{
display: block;
background: gray;
color: #fff;
text-align: center;
border: 2px solid lightgray;
border-bottom-left-radius: 13px;
border-bottom-right-radius: 13px;
}
#wrapper {
display: block;
text-align: center;
}
#menu {
display: none;
background: lightgray;
color: black;
padding-top: 5px;
margin: 0px;
list-style: none;
}
#menu {
color: #000;
text-decoration: none;
border: 2px solid lightgray;
border-radius: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
open
<ul id="menu">
<li>CIT</li>
<li>Blackboard</li>
<li>Mcomms</li>
<li>Tables</li>
<li>Exams</li>
<li>close</li>
</ul>
</div>
Related
I have two toggles (toggle-1 and toggle-2) with different contents in a header. I would like to prevent the user to have both toggles active simultaneously (otherwise they overlap).
In the code below I tried to use if statements to hide one of the toggles if the other is already opened but it does not work.
Ideally, what I would like to happen is that if toggle-1 is active and the user clicks on toggle-2, then toggle-1 would come back to its original state and toggle-2 would be now active. The same the other way around.
I am not familiar with JavaScript yet and I'd really appreciate if you could tell me what I have done wrong and how it should be done to have my ideal result
Here's the link to my CodePen if you find it easier:
https://codepen.io/fergos2/pen/NWWxgEp
var myToggle
var oneToggle = $(document).ready(function() {
$('.toggle-1').click(function() {
$('.toggle-1').toggleClass('active')
$('.toggle-1-content').toggleClass('active')
})
})
var twoToggle = $(document).ready(function() {
$('.toggle-2').click(function() {
$('.toggle-2').toggleClass('active')
$('.toggle-2-content').toggleClass('active')
})
})
if (myToggle == oneToggle) {
$(document).ready(function() {
$('toggle-2-content').hide();
})
} else if (myToggle == twoToggle) {
$('toggle-1-content').hide();
}
.container {
width: 100%;
height: 1000px;
margin: 0 auto;
background-color: #eee;
}
.wrapper {
background-color: pink;
position: relative;
display: flex;
align-items: center;
}
.toggle-1,
.toggle-2 {
display: block;
width: 20px;
height: 20px;
float: left;
cursor: pointer;
color: white;
text-align: center;
background-color: green;
margin: 10px;
}
.toggle-1.active,
.toggle-2.active {
background-color: red;
}
.toggle-1-content,
.toggle-2-content {
display: none;
}
.toggle-1-content.active,
.toggle-2-content.active {
display: block;
background-color: white;
border: 1px solid black;
position: absolute;
top: 40px;
}
.toggle-1-content.active {
left: 0;
}
.toggle-2-content.active {
left: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="wrapper">
<div class="toggle-1">1</div>
<div class="toggle-1-content">
<p>Some content 1</p>
</div>
<div class="toggle-2">2</div>
<div class="toggle-2-content">
<p>Some content 2</p>
</div>
</div>
</div>
Several issues.
Please study the code below
too many $(document.ready... and no need to store the result of such a statement
Using a data-attribute and a common class, shortens the code a lot. DRY Don't repeat yourself
I simplified the content containers CSS too
$(function() { // on page load
$('.toggle').on("click", function() { // any of the toggles
const $wrapper = $(this).closest(".wrapper");
const id = $(this).data("id");
$(this).toggleClass('active'); // toggle clicked div
const show = $(this).is(".active"); // is it active after we toggled?
$wrapper
.find(".toggle") // find all toggles
.not(this) // exclude the one we clicked
.removeClass("active"); // remove class
$wrapper.find(".content").hide(); // hide any content divs
$("#" + id).toggle(show); // show the one belonging to the clicked toggle
})
})
.container {
width: 100%;
height: 1000px;
margin: 0 auto;
background-color: #eee;
}
.wrapper {
background-color: pink;
position: relative;
display: flex;
align-items: center;
}
.toggle {
display: block;
width: 20px;
height: 20px;
float: left;
cursor: pointer;
color: white;
text-align: center;
background-color: green;
margin: 10px;
}
.active {
background-color: red;
}
.content {
display: none;
background-color: white;
border: 1px solid black;
position: absolute;
top: 40px;
}
#div1 {
left: 0;
}
#div2 {
left: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="wrapper">
<div class="toggle" data-id="div1">1</div>
<div id="div1" class="content">
<p>Some content 1</p>
</div>
<div class="toggle" data-id="div2">2</div>
<div id="div2" class="content">
<p>Some content 2</p>
</div>
</div>
</div>
Working code:
$(document).ready(function() {
$('.toggle-1').click(function() {
if ($('.toggle-2').hasClass('active')) {
// remove toggle-2 active classes
$('.toggle-2').removeClass('active');
$('.toggle-2-content').removeClass('active');
}
$('.toggle-1').toggleClass('active');
$('.toggle-1-content').toggleClass('active');
});
$('.toggle-2').click(function() {
if ($('.toggle-1').hasClass('active')) {
// remove toggle-1 active classes
$('.toggle-1').removeClass('active');
$('.toggle-1-content').removeClass('active');
}
$('.toggle-2').toggleClass('active');
$('.toggle-2-content').toggleClass('active');
});
});
Here is the link to my working version.
A few things to keep in mind:
You don't need to call $(document).ready() multiple times. There's just no reason to call it multiple times on a single page as the event is only fired once.
You need to keep track of state somehow; hence the if ($('el').hasClass('classname')) syntax. Once you handle that properly, it's easy to ensure that each element is 'reset' to its original state when the other is clicked.
Hope that helps!
toggleClass accepts a second boolean parameter that forces the type of toggle, on or off. More than that you can also target multiple elements with a single jQuery call, so use that to your advantage since the classes applied have the same name.
So you could simplify your code to
$(document).ready(function() {
$('.toggle-1').click(function() {
$('.toggle-1, .toggle-1-content').toggleClass('active');
$('.toggle-2, .toggle-2-content').toggleClass('active', false)
})
$('.toggle-2').click(function() {
$('.toggle-2, .toggle-2-content').toggleClass('active');
$('.toggle-1, .toggle-1-content').toggleClass('active', false)
})
})
.container {
width: 100%;
height: 1000px;
margin: 0 auto;
background-color: #eee;
}
.wrapper {
background-color: pink;
position: relative;
display: flex;
align-items: center;
}
.toggle-1,
.toggle-2 {
display: block;
width: 20px;
height: 20px;
float: left;
cursor: pointer;
color: white;
text-align: center;
background-color: green;
margin: 10px;
}
.toggle-1.active,
.toggle-2.active {
background-color: red;
}
.toggle-1-content,
.toggle-2-content {
display: none;
}
.toggle-1-content.active,
.toggle-2-content.active {
display: block;
background-color: white;
border: 1px solid black;
position: absolute;
top: 40px;
}
.toggle-1-content.active {
left: 0;
}
.toggle-2-content.active {
left: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="wrapper">
<div class="toggle-1">1</div>
<div class="toggle-1-content">
<p>Some content 1</p>
</div>
<div class="toggle-2">2</div>
<div class="toggle-2-content">
<p>Some content 2</p>
</div>
</div>
</div>
You can use the method "removeClass" to remove the active class from the other toggle
var oneToggle = $(document).ready(function() {
$(".toggle-1").click(function() {
$(".toggle-1").toggleClass("active")
$(".toggle-1-content").toggleClass("active")
$(".toggle-2").removeClass("active")
$(".toggle-2-content").removeClass("active")
})
})
var twoToggle = $(document).ready(function() {
$(".toggle-2").click(function() {
$(".toggle-1").removeClass("active")
$(".toggle-1-content").removeClass("active")
$(".toggle-2").toggleClass("active")
$(".toggle-2-content").toggleClass("active")
})
})
Description: I created two buttons and two more elements (div & section).
When I click on button 1, div element will appear with background-color HotPink and/if at this moment i re-click on button 1, div element will disappear.
I also wrote a function for button 2 so that when i click on button 2, section element will appear with background-colour DarkGreen and at this moment when i click on button 2 again, section element will disappear.
I should mention that if i click on white space of body ( (document).click(event) ), both div and section elements will disapear.
Question: What function should I write to show div element when I click on button 1 and then I hide hide it when I click on button 2 or any other elements on my web page???
Demo
NOTE: I duplicated this question because I'm not interested to use any method like:
$(".button1").click(function(event){
event.stopPropagation();
if($(".div").css("display") == "none"){
$(".div").css("display","block");
$(".section").css("display","none");
}else{
$(".div").css("display","none");
}
});
$(".button2").click(function(event){
event.stopPropagation();
if($(".section").css("display") == "none"){
$(".section").css("display","block");
$(".div").css("display","none");
}else{
$(".section").css("display","none");
}
});
It would be better if you do a favour and suggest a better method instead of duplicating a line of code with different class name under different events (functions).
My codes:
HTML:
<button class="button1">
Show Div Element
</button>
<div class="div">
I am Div Element
</div>
<br><br>
<button class="button2">
Show Section Element
</button>
<section class="section">
I am Section Element
</section>
JQuery:
$(function(){
$(".button1").click(function(event){
event.stopPropagation();
if($(".div").css("display") == "none"){
$(".div").css("display","block");
}else{
$(".div").css("display","none");
}
});
$(".button2").click(function(event){
event.stopPropagation();
if($(".section").css("display") == "none"){
$(".section").css("display","block");
}else{
$(".section").css("display","none");
}
});
$(document).click(function(){
$(".div").css("display","none");
$(".section").css("display","none");
});
});
The easiest way would be to start .click functions for both button 1 & 2 with:
.css("display","none");
function hidding the other element, like this:
$(".button1").click(function(event){
$(".section").css("display","none");
event.stopPropagation();
if($(".div").css("display") == "none"){
$(".div").css("display","block");
}else{
$(".div").css("display","none");
}
});
$(".button2").click(function(event){
$(".div").css("display","none");
event.stopPropagation();
if($(".section").css("display") == "none"){
$(".section").css("display","block");
}else{
$(".section").css("display","none");
}
});
Solution without JQuery... But you can use it if you really want to.
const $ = document.querySelector.bind(document);
const $$ = document.querySelectorAll.bind(document);
$('.button1').addEventListener('click', ()=>{
toggle('div')
});
$('.button2').addEventListener('click', ()=>{
toggle('section')
});
function toggle(element){
if($('.show')){
Array.from($$('.show')).forEach((ele) => {
ele.classList.remove('show');
});
}
$(element).classList.add('show');
}
html, body {
background-color: #fafafa;
width: 100%;
height: 100%;
padding: 12px;
margin: 0;
}
.button1 {
background-color: pink;
position: relative;
display: inline-block;
padding: 8px;
border: none;
margin: 0 0 6px 0;
cursor: pointer;
}
.div {
background-color: hotpink;
display: none;
width: 160px;
height: 160px;
}
.button2 {
background-color: green;
position: relative;
display: inline-block;
padding: 8px;
color: white;
border: none;
margin: 0 0 6px 0;
cursor: pointer;
}
.section {
background-color: darkgreen;
display: none;
width: 160px;
height: 160px;
color: white;
}
.show {
display: block;
}
<button class="button1">
Show Div Element
</button>
<div class="div">
I am Div Element
</div>
<br>
<br>
<button class="button2">
Show Section Element
</button>
<section class="section">
I am Section Element
</section>
This solution relies on event bubbling, so it might break if other handlers stop propagation.
Also note that it currently relies on provided html structure, but that can be tweaked easy enough.
$(document).click(function(e) {
$elem = $(e.target)
// If the element is visible we shouldn't open it again
needToggle = $elem.is('button') && !$elem.next().hasClass("open")
$(".open").removeClass("open") // Remove all open elements
if (needToggle) {
$elem.next().toggleClass("open")
}
})
html,
body {
background-color: #fafafa;
width: 100%;
height: 100%;
padding: 12px;
margin: 0;
}
.button1 {
background-color: pink;
position: relative;
display: inline-block;
padding: 8px;
border: none;
margin: 0 0 6px 0;
cursor: pointer;
}
.div {
background-color: hotpink;
display: none;
width: 160px;
height: 160px;
}
.button2 {
background-color: green;
position: relative;
display: inline-block;
padding: 8px;
color: white;
border: none;
margin: 0 0 6px 0;
cursor: pointer;
}
.section {
background-color: darkgreen;
display: none;
width: 160px;
height: 160px;
color: white;
}
.open {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button1">
Show Div Element
</button>
<div class="div">
I am Div Element
</div>
<br><br>
<button class="button2">
Show Section Element
</button>
<section class="section">
I am Section Element
</section>
On click of button i need to see a custom conformation dialogue box. I am able to see it but once the dialogue box has opened then I don't want to perform any action in HTML page until user select any option in dialogue box. I mean just similar to alert box functionality, until we say "Ok" in alert box the control does not go to HTML page. I need the same , My code is as follows,
Css
<style>
#confirmBox {
z-index:9999;
display: none;
background-color: #eee;
border-radius: 5px;
border: 1px solid #aaa;
position: relative;
width: 300px;
left: 50%;
margin-left: -150px;
padding: 6px 8px 8px;
box-sizing: border-box;
text-align: center;
}
#confirmBox .button {
background-color: #ccc;
display: inline-block;
border-radius: 3px;
border: 1px solid #aaa;
padding: 2px;
text-align: center;
width: 80px;
cursor: pointer;
}
#confirmBox .button:hover {
background-color: #ddd;
}
#confirmBox .message {
text-align: left;
margin-bottom: 8px;
}
</style>
Script:
$( "#locationList" ).on( "click", "li", function( event ) {
var form = $(this).closest('form');
doConfirm("The Coordinates for Selected location are "+ coodinatesDetails, function yes() {
alert("mail");
}, function no() {
//alert("Ok"); -- Do Nothing
} , function sms()
{
alert("sms");
});
});
function doConfirm(msg, yesFn, noFn, smsFn) {
var confirmBox = $("#confirmBox");
confirmBox.find(".message").text(msg);
confirmBox.find(".yes,.no,.sms").unbind().click(function () {
confirmBox.hide();
});
confirmBox.find(".yes").click(yesFn);
confirmBox.find(".no").click(noFn);
confirmBox.find(".sms").click(smsFn);
confirmBox.show();
}
HTML:
<div id="confirmBox">
<div class="message"></div>
<span class="button yes">Mail</span>
<span class="button sms">SMS</span>
<span class="button no">Cancle</span>
</div>
You will only need an overlay to accomplish this. Try something like this: http://jsfiddle.net/7MJBR/1/
Html Changes:
<div id="confirmOverlay"></div>
<div id="confirmBox">
<div class="message"></div> <span class="button yes">Mail</span>
<span class="button sms">SMS</span>
<span class="button no">Cancle</span>
</div>
CSS Changes:
#confirmOverlay {
position:fixed;
background: rgba(0,0,0,.5);
z-index: 9998;
width:100%;
top:0px;
left:0px;
}
Javscript Change:
function doConfirm(msg, yesFn, noFn, smsFn) {
var confirmBox = $("#confirmBox");
$("#confirmOverlay").height( $(window).height() );
confirmBox.find(".message").text(msg);
confirmBox.find(".yes,.no,.sms").unbind().click(function () {
confirmBox.hide();
$("#confirmOverlay").hide();
});
confirmBox.find(".yes").click(yesFn);
confirmBox.find(".no").click(noFn);
confirmBox.find(".sms").click(smsFn);
confirmBox.show();
}
The Overlay having a Z-index of 1 below your popup, and the fact that it covers the screen will prevent people from accessing the content below. I provided filler content in my JSFIDDLE to show this.
Once the dialog and overlay are no longer needed; $('#confirmOverlay').hide() or $('#confirmOverlay').fadeOut(200) will make it go bye bye. :)
I hope this helps! Let me know if you have questions.
I've got a simple to-do list app. To-do items are inserted by jQuery as <li> items. When they're checked off, they're removed from #todolist and prepended to #donelist. I want to let the user replace to-do items they've accidentally checked off, hence the .on handler for #donelist .checkbox elements, but it's not working. I've been puzzling over this for an embarrassingly long amount of time. How can I get the click handler working for #donelist .checkboxes?
HTML:
<div id="topform">
<input type="text" id="task" placeholder=" New task...">
</div>
<ul id="todolist">
</ul>
<ul id="donelist">
</ul>
JS:
$('#todolist').on('click', '.checkbox', checkTask);
$('#donelist').on('click', '.checkbox', replaceTask);
$('input').keypress(function (e) {
if (e.which == 13) {
addTask(e);
}
});
function addTask(e) {
taskToAdd = $('#task').val();
var listItem = "<li><span class='todotask'>" + taskToAdd + "</span><div class='checkbox'></div></li>";
$('#todolist').prepend(listItem);
}
function checkTask() {
var listItem = $(this).parent();
listItem.remove();
$('#donelist').prepend(listItem);
}
function replaceTask() {
alert('hey buddy');
}
Full CSS:
html,
body {
margin: 0;
padding: 0;
background-color: #313131;
font-family: 'Helvetica', sans-serif;
}
#task {
width: 98%;
margin: 5px auto 7px auto;
padding: 0;
display: block;
height: 45px;
border: none;
border-radius: 2px;
font-size: 25px;
background-color: #F7F7F7;
}
ul {
margin: 0 auto 0 auto;
padding: 0;
width: 98%;
}
li {
list-style-type: none;
padding: 0;
margin: 5px auto 0 auto;
width: 100%;
height: 45px;
line-height: 45px;
position: relative;
font-size: 25px;
border-radius: 2px;
background-color: #F7F7F7;
}
#donelist li {
opacity: .5;
text-decoration: line-through;
}
.todotask {
margin-left: 7px;
}
.checkbox {
height: 31px;
width: 31px;
border-radius: 2px;
background-color: #C1C1C1;
position: absolute;
right: 7px;
top: 7px;
}
checkTask() works just fine, which is what really confuses me. checkTask() is called when the user clicks on a dynamically inserted element (a div in a li that's inserted by addTask(). Why doesn't replaceTask() fire as well?
Having the corresponding HTML in the OP would have helped, so I've had to guess a bit about how the structure, but here's a working example of what I think you're looking for:
HTML
<h1>ADD</h1>
<input id="task"></input>
<button id="add">Add</button>
<h1>TODO</h1>
<ul id="todolist">
<li><span class='todotask'>" Take out the garbage "</span><div class='checkbox'></div></li>
<li><span class='todotask'>" Do the dishes "</span><div class='checkbox'></div></li>
</ul>
<h1>DONE</h1>
<ul id="donelist">
</ul>
CSS
.checkbox{
width: 15px;
height: 15px;
background-color: black;
display: inline-block;
cursor: pointer;
}
JavaScript inside document.ready()
$('#todolist').on('click', '.checkbox', checkTask);
$('#donelist').on('click', '.checkbox', replaceTask);
$("#add").click(addTask);
function addTask(e) {
taskToAdd = $('#task').val();
var listItem = "<li><span class='todotask'>" + taskToAdd + "</span><div class='checkbox'></div></li>";
$('#todolist').prepend(listItem);
}
function checkTask() {
var listItem = $(this).parent();
listItem.remove();
$('#donelist').prepend(listItem);
}
function replaceTask() {
var listItem = $(this).parent();
listItem.remove();
$('#todolist').prepend(listItem)
}
I am creating a 'FAQ' page which has a list of questions at the top (links) and the answers appear below.
As each question is clicked the corresponding answer is shown (using show/hide divs). My questions is: Is there a way to make the clicked question/link bold? and for it to stay bold until another question is clicked, in which case the newly clicked question will be bold and the previously clicked question will go back to normal.
I have tried using a:active in the CSS but although this makes the text bold on clicking, as soon as you let go of the mouse it goes back to normal.
This is my CSS
div#newboxes1, div#newboxes2, div#newboxes3
{
border: 1px solid black;
background-color: #CCCCCC;
display: none;
padding: 5px;
width: 659px;
}
div#newboxes1 {
display:block;
}
ol#toc {
height: 2em;
list-style: none;
margin: 0;
padding: 0;
border: none;
}
ol#toc li {
float: left;
}
ol#toc li a img
{
border: none;
}
ol#toc a {
color: #676767;
float: left;
line-height: 2em;
text-decoration: none;
}
ol#toc li.current {
background-color: #e5e5e4;
background-position: 0 -60px;
}
ol#toc li.current a {
color: #676767;
}
ol#toc li.current a:hover {
color: #fff;
font-weight: bold;
}
div.content {
background: #e6e5e4;
padding: 20px;
width: 669px;
margin: 0px;
}
div.content a
{
color: #000000;
text-decoration: underline;
}
div.content a:active
{
font-weight: bold;
}
div.content a:visited
{
font-weight: bold;
}
This is my HTML
<ol id="toc"><li class="current"><img src="delivery_0.jpg" alt="Delivery" /></li>
<li><img src="returns.jpg" /></li>
<li><img src="contact.jpg" /></li>
<li><img src="shopping.jpg" /></li></ol>
<div class="content">
<p><a name="newboxes" href="javascript:showonlyone('newboxes1');" >Where is my order? </a></p>
<p><a name="newboxes" href="javascript:showonlyone('newboxes2');" >UK Standard Delivery</a></p>
<p><a name="newboxes" href="javascript:showonlyone('newboxes3');" >UK Next Day Delivery</a></p>
<div name="newboxes" id="newboxes1">
<p>Where is my order answer</p>
</div>
<div name="newboxes" id="newboxes2">
<p>UK Standard Delivery answer</p>
</div>
Javascript function is called when each link is clicked, this shows/hides the relevant divs which are currently on top of each other.
javascript is below
function showonlyone(thechosenone) {
var newboxes = document.getElementsByTagName("div");
for(var x=0; x<newboxes.length; x++) {
name = newboxes[x].getAttribute("name");
if (name == 'newboxes') {
if (newboxes[x].id == thechosenone) {
newboxes[x].style.display = 'block';
}
else {
newboxes[x].style.display = 'none';
}
}
}
}
Thanks for your help :)
Theresa
You have to add this style to your css file:
ol#toc li.current a:active {
font-weight: bold;
}
Yes, just amend your Javascript to add or remove a class. Define that class as having text-weight bold or normal.
CSS selector :active will do it. Usage same as with :hover.
using jquery something like this may work. you can substitute ".css" for ".addClass('class')" and ".removeClass('class')" in the relevant places.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('ol#foo li').click(function() {
$('ol#foo li').css('font-weight','normal');
$(this).css('font-weight','bold');
});
});
// or:
$(document).ready(function()
{
$('ol#foo li').click(function() {
$('ol#foo li').removeClass('active');
$(this).addClass('active')
});
});
</script>
should note - where "active" is your css class to style the LI. and ol#foo is your OL.