/    Sign up×
Community /Pin to ProfileBookmark

Plus to minus and back again

Copy linkTweet thisAlerts:
Aug 31.2006

Hi,

I have had a search on the forums but can’t find exactly what I am looking for.

I have created a show/hide list which works fine.

Problem is I want to use the plus text [+] to click on to show the list, which then turns into [-] and then back to [+] once clicked on again.

Is there anyway of doing this?

Here is my basic code, basically I click on ‘Menu Item 1 and the [+] changes into [-] and then back again

[CODE]
<ul
<li>[+] Menu Item 1</li>
<li>
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
</ul>
</li>
</ul>[/CODE]

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@cridleyAug 31.2006 — in the show/hide code change the innerHTML property of your menu to be "[+] Menu Item 1" on hide and "[-] Menu Item 1" on show
Copy linkTweet thisAlerts:
@DisfunctionalauthorAug 31.2006 — problem with that is, is the menu item 1 etc will have different names

So Menu Item 1 may be [+] News and the next one [+] Bio so I'm looking to just change the [+] to [-] etc
Copy linkTweet thisAlerts:
@cridleyAug 31.2006 — then replace [+] with [-] in the innerHTML (use substr), and vice versa if you post the show/hide code I'll change it for you
Copy linkTweet thisAlerts:
@DisfunctionalauthorAug 31.2006 — Hi,

Here is the full code:

[CODE]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title> Drop Down Menu </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="en" />

<script type="text/javascript">

function toggleNav(objID) {
if (!document.getElementById) return;
var ob = document.getElementById(objID).style;
ob.display = (ob.display == 'block')?'none': 'block';
}

</script>

<style type="text/css" media="all">
<!--

body {
font-family: verdana, arial, tahoma, helvetica, sans-serif;
font-size: 11px;
background: #fff;
}

#nav {
width: 300px;
list-style: none;
margin: 0;
border: 1px solid #f00;
padding: 5px;
}

#nav li {
font-weight: bold;
}

#nav li ul {
list-style: none;
margin: 0;
padding: 0;
}

#nav li ul li {
font-weight: normal;
font-style: italic;
margin-left: 23px;
}

#nav .sectionOn {
display: block;
display: inline;
}

#nav .sectionHeading {
display: none;
}

-->

</style>

</head>

<body>

<ul id="nav">
<li onclick="toggleNav('section1')" id="sectionTitle">[+] Menu Item 1</li>
<li id="section1" class="sectionHeading">
<ul class="sectionOn">
<li>Sub 1</li>
<li>Sub 2</li>
</ul>
</li>

<li onclick="toggleNav('section2')" id="sectionTitle">[+] Menu Item 2</li>
<li id="section2" class="sectionHeading">
<ul class="sectionOn">
<li>Sub 1</li>
<li>Sub 2</li>
</ul>
</li>

<li onclick="toggleNav('section3')" id="sectionTitle">[+] Menu Item 3</li>
<li id="section3" class="sectionHeading">
<ul class="sectionOn">
<li>Sub 1</li>
<li>Sub 2</li>
</ul>
</li>
</ul>

</body>

</html>
[/CODE]

Hopefully makes it easier to explain ?
Copy linkTweet thisAlerts:
@cridleyAug 31.2006 — I meant replace(), not substr()

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title> Drop Down Menu </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="en" />

<script type="text/javascript">

function toggleNav(objID) {
if (!document.getElementById) return;

var ob = document.getElementById(objID).style;
ob.display = (ob.display == 'block')?'none': 'block';

var head = document.getElementById("header_" + objID)

if (ob.display == 'block')
head.innerHTML = head.innerHTML.replace("[+]","[-]")
else
head.innerHTML = head.innerHTML.replace("[-]","[+]")

}

</script>

<style type="text/css" media="all">
<!--

body {
font-family: verdana, arial, tahoma, helvetica, sans-serif;
font-size: 11px;
background: #fff;
}

#nav {
width: 300px;
list-style: none;
margin: 0;
padding: 0;
border: 1px solid #f00;
padding: 5px;
}

#nav li {
font-weight: bold;
}

#nav li ul {
list-style: none;
margin: 0;
padding: 0;
}

#nav li ul li {
font-weight: normal;
font-style: italic;
margin-left: 23px;
}

#nav .sectionOn {
display: block;
display: inline;
}

#nav .sectionHeading {
display: none;
}

-->

</style>

</head>

<body>

<ul id="nav">
<li onclick="toggleNav('section1')" id="header_section1">[+] Menu Item

1</li>
<li id="section1" class="sectionHeading">
<ul class="sectionOn">
<li>Sub 1</li>
<li>Sub 2</li>
</ul>
</li>

<li onclick="toggleNav('section2')" id="header_section2">[+] Menu Item

2</li>
<li id="section2" class="sectionHeading">
<ul class="sectionOn">
<li>Sub 1</li>
<li>Sub 2</li>
</ul>
</li>

<li onclick="toggleNav('section3')" id="header_section3">[+] Menu Item

3</li>
<li id="section3" class="sectionHeading">
<ul class="sectionOn">
<li>Sub 1</li>
<li>Sub 2</li>
</ul>
</li>
</ul>

</body>

</html>[/CODE]
Copy linkTweet thisAlerts:
@DisfunctionalauthorAug 31.2006 — Yes!!

Thanks very much, really appreciate that ?
Copy linkTweet thisAlerts:
@cridleyAug 31.2006 — thats ok.... you might want to change the cursor when mouse is over the titles. and stuff.
×

Success!

Help @Disfunctional spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...