(no clear way to describe) please read

[mikemastah]

I'm probably doing something wrong here :-D

What I want to do is when I click the 'class="lefthead"' div the first 'class="lefttext"' after that changes from 'display: block;' to 'display: none;' and the other way around.

 

<script type="text/javascript">
<!--
function hideText(aNode) {
var totoggle=aNode.nextSibling;
var style = document.getElementById(totoggle).style;
style.display = (style.display == 'none') ? "block" : "none";
return false;
}
//-->
</script>

<div onclick="hideText(this)" class="lefthead"><div class="leftheadbox">[img=/images/text.png] Test</div></div>
<div id="totoggle" class="lefttext" style="display: none;">
Blablabla


testing new feature.



blablabla
</div>

 

Please help I have absolutely no clue.

[Floydian]

Re: (no clear way to describe) please read

I'm highlighting the changes I'm making:

The text in red is not going to be used at all.

The text that is struckthrough is taken out completely.

The text in green is modified slightly.

<script type="text/javascript">

<!--

function hideText(aNode) {

var totoggle=aNode.nextSibling;

var style = document.getElementById(totoggle).style;

style.display = (style.display == 'none') ? "block" : "none";

return false;

}

//-->

</script>

Here is the modified script.

<script type="text/javascript">
<!--
function hideText(aNode) {
var style = document.getElementById('totoggle').style;
style.display = (style.display == 'none') ? "block" : "none";
return false;
}
//-->
</script>

 

Hope that helps...

[mikemastah]

Re: (no clear way to describe) please read

I used that before but I have multiple blocks of "lefthead" and "lefttext". I need each "lefthead" to toggle the belonging "lefttext"... that's what makes it so hard for me. I know i could make something like.

<script type="text/javascript">
<!--
function hideText(toggleDiv) {
var style = document.getElementById(toggleDiv).style;
style.display = (style.display == 'none') ? "block" : "none";
return false;
}
//-->
</script>

<div onclick="hideText('totoggle1')" class="lefthead"><div class="leftheadbox">[img=/images/text.png] Test</div></div>
<div id="totoggle1" class="lefttext" style="display: none;">
Blablabla


testing new feature.



blablabla
</div>

 

But it would take me ages to give all the "lefttext" div's on my site an id (including the php-loop generated ones).

[Floydian]

Re: (no clear way to describe) please read

Alrighty, then that means you need to remove that id="totoggle" since you're using it more than once. Only the first instance of totoggle could ever be used, so it's pointless to have that in there.

The easiest way to do what you want is to add and remove classes.

If you setup the lefthead class like this:

.lefthead.totoggle + div.lefttext {

display: none;

}

Then when the lefthead is clicked on, simply add the totoggle class to itself. The + modifier that works in IE 7 (among others) will target the adjacent sibling.

so in your function, pass the "this" into it and do something like

this.style.className = 'lefthead totoggle';

or

this.style.className = 'lefthead';

And that will toggle the display on that lefttext

Hope that helps...

[mikemastah]

Re: (no clear way to describe) please read

whoa hard, I don't really understand. '.lefthead.totoggle + div.lefttext' is in css right?

could you post exactly what I have to do? I'm not that good with javascript.

[Floydian]

Re: (no clear way to describe) please read

Place in css file:

.lefthead.totoggle + div.lefttext {
   display: none;
}

 

JS Script

<script type="text/javascript">
function hideText(aNode) {
if (aNode.className === 'lefthead') {
	aNode.className = 'lefthead totoggle';
} else {
	aNode.className = 'lefthead';
}
return false;
}
</script>

 

Hope that helps :P

[Floydian]

Re: (no clear way to describe) please read

By the way, you would have to remove style="display: none;" from the lefttext div or else applying the class will do nothing...

[mikemastah]

Re: (no clear way to describe) please read

somehow, this doesn't work at all.....

I used the exact js and css you gave me but still no luck.

[Floydian]

Re: (no clear way to describe) please read

Can you put up a link to the page?

[mikemastah]

Re: (no clear way to describe) please read

 

By the way, you would have to remove style="display: none;" from the lefttext div or else applying the class will do nothing...

hehehehe... oops :D

thanks a lot Floydian.

Issue solved

[Floydian]

Re: (no clear way to describe) please read

Cool, glad that worked ;)