Jump to content
MakeWebGames

(no clear way to describe) please read


mikemastah
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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).

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...