Hopefully easy Img toggle js

**ben_johnson1991** · 08-18-2010 06:02 AM

Hey,
Basically I want a right and down arrow to appear depending on whether a div appears.
If the header div is clicked, the subdiv's display toggles block or none.
At the same time id like the arror img to change accordingly.

This is my current function, it works fine

function toggle_visibility(cat'.$categoryId.') {
var e'.$categoryId.' = document.getElementById(cat'.$categoryId.');
if(e'.$categoryId.'.style.display == \'block\' || e'.$categoryId.'.style.display == \'\')
e'.$categoryId.'.style.display = \'none\';
else
e'.$categoryId.'.style.display = \'block\';

I've tried many times to add a script that'll change the src but no luck at all

..

The image name is simply arror$categoryId...
By the way, the reason for the '. .' etc is because this is printed via php

.

This should be easy.. but I've never done it before and the posts ive found so far on the web haven't been helpful.

Thanks for any help guys!!!
Ben

**Fang** · 08-19-2010 01:10 AM

PHP Code:


function toggle_visibility(cat'.$categoryId.') {
var e'.$categoryId.' = document.getElementById(cat'.$categoryId.');
var img'.$categoryId.' = document.getElementById(arror'.$categoryId.');
if(e'.$categoryId.'.style.display == \'block\' || e'.$categoryId.'.style.display == \'\') {
e'.$categoryId.'.style.display = \'none\';
img'.$categoryId.'.src = \'down.gif\';
}
else {
e'.$categoryId.'.style.display = \'block\';
img'.$categoryId.'.src = \'up.gif\';
}

This hardcodes the id, so can only be used for a specific case

**ben_johnson1991** · 08-19-2010 03:21 AM

Cheers for the reply dude, but that is what I've been trying and just no luck :/.
the image: <img src="style/arrorRight.gif" width="12" id="arrImg'.$categoryId.'">

JS----
function toggle_visibility(cat'.$categoryId.') {
var e'.$categoryId.' = document.getElementById(cat'.$categoryId.');
var img'.$categoryId.' = document.getElementById(arrImg'.$categoryId.');
if(e'.$categoryId.'.style.display == \'block\' || e'.$categoryId.'.style.display == \'\')
e'.$categoryId.'.style.display = \'none\',
img'.$categoryId.'.src = \'arrorDown.gif\';
else
e'.$categoryId.'.style.display = \'block\',
img'.$categoryId.'.src = \'arrorDown.gif\';
}

I assume at the end of each task in a if, if there is another task to follow, you end it with , instead of ; as whenever the first task ends in ; neither tasks proceed.

Any clues??
Cheers,
Ben.

**Fang** · 08-19-2010 07:17 AM

Error in the if statement and you removed the brackets around the if...else contents

PHP Code:


if(e'.$categoryId.'.style.display == \'block\') {
e'.$categoryId.'.style.display = \'none\';
img'.$categoryId.'.src = \'arrorDown.gif\';
{
else {
e'.$categoryId.'.style.display = \'block\';
img'.$categoryId.'.src = \'arrorDown.gif\';
}

if there is another task to follow, you end it with , instead of ;

With a semi-colon, never a comma

**ben_johnson1991** · 08-19-2010 09:06 PM

Yeh I realised the brackets after I posted this, but the src still does not change..
Mate, I really don't get it, this should be simple right??

Code:

<script type="text/javascript">
 <!--
function toggle_visibility(cat'.$categoryId.') {
	var e'.$categoryId.' = document.getElementById(cat'.$categoryId.');
	var img'.$categoryId.' = document.getElementById(arrImg'.$categoryId.');
		if(e'.$categoryId.'.style.display == \'block\' || e'.$categoryId.'.style.display == \'\'){
			e'.$categoryId.'.style.display = \'none\';
			img'.$categoryId.'.src = \'style/arrorDown.gif\';
		}else{
			e'.$categoryId.'.style.display = \'block\';
			img'.$categoryId.'.src = \'style/arrorDown.gif\';
		}
}//-->
</script>

I really appreciate you trying to help me bud.

**tirna** · 08-19-2010 09:19 PM

just some food for thought if you haven't already tried it.

Your javaacript function code is being generated in PHP. No problem there.

I assume the function is being written by php into the <head> of your php page.

If so, then when you open the web page in your browser, if you right click the page and View->Source, you should see the outputed javascript code.

It should be easier to see any syntax and/or logic errors in the outputed js code than in the php code that generates the js. You can then fix the the php code accordingly.

Maybe post the outputed js code.

**ben_johnson1991** · 08-19-2010 09:57 PM

Hey Tirna

Well this is what prints

PHP Code:


<script type="text/javascript">



function toggle_visibility(cat1) {

    var e1 = document.getElementById(cat1);

    var img1 = document.getElementById(arrImg1);

        if(e1.style.display == 'block' || e1.style.display == ''){

            e1.style.display = 'none';

            img1.src = 'style/arrorDown.gif';

        }else{

            e1.style.display = 'block';

            img1.src = 'style/arrorDown.gif';

        }

}





function toggle_visibility(cat2) {

    var e2 = document.getElementById(cat2);

    var img2 = document.getElementById(arrImg2);

        if(e2.style.display == 'block' || e2.style.display == ''){

            e2.style.display = 'none';

            img2.src = 'style/arrorDown.gif';

        }else{

            e2.style.display = 'block';

            img2.src = 'style/arrorDown.gif';

        }

}





function toggle_visibility(cat3) {

    var e3 = document.getElementById(cat3);

    var img3 = document.getElementById(arrImg3);

        if(e3.style.display == 'block' || e3.style.display == ''){

            e3.style.display = 'none';

            img3.src = 'style/arrorDown.gif';

        }else{

            e3.style.display = 'block';

            img3.src = 'style/arrorDown.gif';

        }

}





function toggle_visibility(cat4) {

    var e4 = document.getElementById(cat4);

    var img4 = document.getElementById(arrImg4);

        if(e4.style.display == 'block' || e4.style.display == ''){

            e4.style.display = 'none';

            img4.src = 'style/arrorDown.gif';

        }else{

            e4.style.display = 'block';

            img4.src = 'style/arrorDown.gif';

        }

}





function toggle_visibility(cat5) {

    var e5 = document.getElementById(cat5);

    var img5 = document.getElementById(arrImg5);

        if(e5.style.display == 'block' || e5.style.display == ''){

            e5.style.display = 'none';

            img5.src = 'style/arrorDown.gif';

        }else{

            e5.style.display = 'block';

            img5.src = 'style/arrorDown.gif';

        }

}



</script>

This is copied from firefox, however, not even the div display changes.

In chrome I get error
Uncaught TypeError: Cannot set property 'src' of null
But only on the last of the array img5, but the divs display toggles.

I have never seen this before.

**ben_johnson1991** · 08-19-2010 10:36 PM

Quick update, I've changed the single quotation to double, this seems to have more luck (not in firefox).

But only changes the last of the array no matter which id is selected.
Maybe I should just drop this img thing, but it shouldn't be this complicated right??

I've ftped it up to the web if you wanna look,
http://bensbox.co.uk/trilube/products.php

**drudeken** · 08-19-2010 10:39 PM

1. All images say arrowDown.gif.
2. Condense into one function.

PHP Code:


<script>
    function toggle_visibility(catId) {
        if(IsNumeric(catId) == false || catId > 5 || catId < 1){return;}
        
        var ele = document.getElementById("cat"+catId);
        
        var img = document.getElementById("arrImg"+catId);
        
        if(ele.style.display == 'block' || ele.style.display == ''){
                ele.style.display = 'none'; 
            img.src = 'style/arrorDown.gif'; 
        }else{ 
            ele.style.display = 'block'; 
            img.src = 'style/arrorUp.gif'; 
        } 
    }
function IsNumeric(num){
    return typeof num === 'number' && isFinite(num);    
}
</script>

HTML Code:

<div>
	<div id="cat1">Testing</div>
	<div>
		<img src="style/arrowUp.gif" id="arrImg1" onclick="toggle_visibility(1)"/>
	</div>
</div>

See the Linked Example.

Hope this helps.

**tirna** · 08-19-2010 11:07 PM

Originally Posted by ben_johnson1991

Hey Tirna

Well this is what prints

PHP Code:


<script type="text/javascript">
 
function toggle_visibility(cat1) {
    var e1 = document.getElementById(cat1);
    var img1 = document.getElementById(arrImg1);
        if(e1.style.display == 'block' || e1.style.display == ''){
            e1.style.display = 'none';
            img1.src = 'style/arrorDown.gif';
        }else{
            e1.style.display = 'block';
            img1.src = 'style/arrorDown.gif';
        }
}
.
.
. 
</script>

This is copied from firefox, however, not even the div display changes.

In chrome I get error
Uncaught TypeError: Cannot set property 'src' of null
But only on the last of the array img5, but the divs display toggles.

I have never seen this before.

I would try changing your php code to generate js code something like this for your IF block

Code:

if(e1.style.display == 'block'){ 
            e1.style.display = 'none'; 
            img1.src = 'style/arrorRight.gif'; 
}else{ 
            e1.style.display = 'block'; 
            img1.src = 'style/arrorDown.gif'; 
}

**Fang** · 08-20-2010 09:40 AM

This error was corrected in post #4, but not updated by OP

if(e1.style.display == 'block' || e1.style.display == ''){

**tirna** · 08-21-2010 05:27 PM

There'e no harm in reminding them then

**savvykms** · 08-22-2010 06:55 PM

All of the functions have the exact same name, possibly causing a reassignment of the function code block. The underlined "arrImgX" variables I do not see in exclusively this peice of code, are they variables or strings? I just skimmed this thread reading here and there.

Originally Posted by ben_johnson1991

Well this is what prints

PHP Code:


<script type="text/javascript">



function toggle_visibility(cat1) {

    var e1 = document.getElementById(cat1);

    var img1 = document.getElementById([U]arrImg1[/U]);

        if(e1.style.display == 'block' || e1.style.display == ''){

            e1.style.display = 'none';

            img1.src = 'style/arrorDown.gif';

        }else{

            e1.style.display = 'block';

            img1.src = 'style/arrorDown.gif';

        }

}





function toggle_visibility(cat2) {

    var e2 = document.getElementById(cat2);

    var img2 = document.getElementById([U]arrImg2[/U]);

        if(e2.style.display == 'block' || e2.style.display == ''){

            e2.style.display = 'none';

            img2.src = 'style/arrorDown.gif';

        }else{

            e2.style.display = 'block';

            img2.src = 'style/arrorDown.gif';

        }

}





function toggle_visibility(cat3) {

    var e3 = document.getElementById(cat3);

    var img3 = document.getElementById([U]arrImg3[/U]);

        if(e3.style.display == 'block' || e3.style.display == ''){

            e3.style.display = 'none';

            img3.src = 'style/arrorDown.gif';

        }else{

            e3.style.display = 'block';

            img3.src = 'style/arrorDown.gif';

        }

}





function toggle_visibility(cat4) {

    var e4 = document.getElementById(cat4);

    var img4 = document.getElementById([U]arrImg4[/U]);

        if(e4.style.display == 'block' || e4.style.display == ''){

            e4.style.display = 'none';

            img4.src = 'style/arrorDown.gif';

        }else{

            e4.style.display = 'block';

            img4.src = 'style/arrorDown.gif';

        }

}





function toggle_visibility(cat5) {

    var e5 = document.getElementById(cat5);

    var img5 = document.getElementById([U]arrImg5[/U]);

        if(e5.style.display == 'block' || e5.style.display == ''){

            e5.style.display = 'none';

            img5.src = 'style/arrorDown.gif';

        }else{

            e5.style.display = 'block';

            img5.src = 'style/arrorDown.gif';

        }

}



</script>

This is copied from firefox, however, not even the div display changes.

Thread: Hopefully easy Img toggle js

Thread Tools

Display

Hopefully easy Img toggle js

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions