js hide/unhide with css formatting

Question

I have the following js script which (on its own it works fine really):

<style>
<!--
.hide { display: none; }
.unhide { 
display: block; 
text-decoration: none;
color: black;
}
-->
</style>
<script type="text/javascript">
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
    item.className=(item.className=='hide')?'unhide':'hide';
}
}
</script>
</head>
<body>
<div id="col2">
<a href="javascript:unhide('content1');">
Title of Content</a>
</div>
<div id="col2">
<div id="content1" class="hide">
Body of content
</div>
</div>

Left alone, this produces output, at least. But I want to format this according to this css code:

 a.unhide li {
 background: #fff;
 font: 20px century schoolbook, serif;
 }
 a.unhide li:hover {
 background: #ddd;
 text-decoration:underline;
 padding: 3px 8px;
 display: table-row;
 line-height: 500%;
 transition: background .25s ease-in-out;
 -moz-transition: background .25s ease-in-out;
 -webkit-transition: background .25s ease-in-out;
 }
 .hide {
 font: 20 px century schoolbook, serif;
 color: black;
 text-decoration: none;
 }

So how can I possibly "pair" all this? I've posted elsewhere and people have been stumped. Please help. I can induce changes into just about every aspect BUT the "unhide" portion of the js script. It does not cooperate with me ;( Basically I want a #ddd hover effect over the "unhide" link and all content to be in century schoolbook. Please help. Thank you.

please improve your question, means put html according to your last css then we can help to make js — developerCK, Sep 08 '13 at 05:43
hey developerCK I'm not sure what "means put html according to you last css" means. Can you clarify? Sorry I'm still very much a newbie programming. — Alexander Trahaj, Sep 08 '13 at 05:53
you are making css for li , am i right(a.unhide li) but given html code does not contain li. — developerCK, Sep 08 '13 at 05:57
hey developerCK, thanks for clarifying...yes, in my html I've sort of inserted
to get the li effect (the css is an external file). Basically it would be:
Title of Content
but the A.UNHIDE LI just looks wrong to my eye... — Alexander Trahaj, Sep 08 '13 at 06:02
sorry developerCK...just to be sure, your recommendation is --> so your recommendation is-->
Title of Content
then? — Alexander Trahaj, Sep 08 '13 at 06:09
If the html is as you posted above then my answer should work. If you have a `
Now you updated your code with errors, you cannot have CSS inside the href like that. Leave the function name as it was: `` — Sergio, Sep 08 '13 at 06:28

score 0 · Accepted Answer · edited May 23 '17 at 12:11

0

Your problem might be that you have double IDs. IDs cannot be duplicate, they have to be unique. You can give them a class instead.

Try this instead:

HTML

<div>
    <a href="javascript:unhide('content1');">
    Title of Content
    </a>
</div>
<div>
    <div class="content1 hide">Body of content</div>
</div>

Javascript

function unhide(divID) {
    var item = document.getElementsByClassName(divID)[0];
    console.log(item);
    console.log(item.className ==  divID + ' hide');
    if (item) {
        item.className = (item.className ==  divID + ' hide') ? divID + ' unhide' : divID + ' hide';
    }
}

Demo here

In your CSS you are applying the hover to a a.unhide li:hover {. Is that what you want? I see no li in your code and the content1 in your code is a div not a a.

edited May 23 '17 at 12:11

Community

1
1

answered Sep 08 '13 at 05:37

Sergio

27,160
10
79
126

yes, a.unhide li:hover {. so I should have content1 as – Alexander Trahaj Sep 08 '13 at 06:06
@AlexanderTrahaj, is there a `
` inside the ``? I don't see that in your code

Sergio

Sep 08 '13 at 06:08

Hey Sergio - jsfiddle is giving me a bit of trouble. I can make changes but I can't "run" those changes... – Alexander Trahaj Sep 08 '13 at 06:12

@AlexanderTrahaj, do you see the "run" button? otherwise you can update and give me back the link – Sergio Sep 08 '13 at 06:13

I actually did not realize i needed to make an account. Just did. there should be an

in the . I left it out. I apologize. Also, I'm running through the code but clicking "title of content" doesn't hind/unhide the body of content though.

– Alexander Trahaj Sep 08 '13 at 06:18

js hide/unhide with css formatting

1 Answers1

Demo here