accordion Accordion

[Alwayslost]

Hello all:
I have a script I use to create accordions using an image.

But, I am want the hovered image and/or the clicked/tapped image to be different as the original accordion image.

Any suggestions on the script are appreciated. 

The script I am using right now is:

 

HTML BLOCK / DISABLED / BEFORE THE SECTION IN THE ACCORDION

<center><img src="http://assets.goplaypool.com/files/theme/appcas/updatepass000.png" onClick="Displayer(2)" ></center>
<table id="Section2" style="display:none;"><br><td>

THEN;

HTML BLOCK / DISABLED / AFTER THE SECTION AFTER THE ACCORDION

</td></table><br>

AND A FOOTER SCRIPT:

<script>
function Displayer(n)
{
var check = document.getElementById('Section'+n);
if(check.style.display == 'none')
{
check.style.display='inline';
}
else
{
check.style.display='none';
}
}
</script>

 

---

Now on hover and/or "open" accordion, I want a different image. 

 

Thanks in advance

[Vitalikssssss]

Hi Alwayslost,

 

You can achieve desired functionality with a usage of JQuery library.

Please note that you should re-write you Footer script this hide/display section.

I have created following solution but only for one image which will execute hide/display function.

Place following code in Header: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Place following code into the HTML BLOCK / DISABLED / BEFORE THE SECTION:

<div id="button">
<center><img src="YOUR_IMAGE_#1_URL" alt="My button" class="button"> </center>
</div>

<script>

var split = new Array();
    
    split[0] = "YOUR_IMAGE_#1_URL";
    split[1] = "YOUR_IMAGE_#2_URL";
    
    $(document).ready(function()
    {
        $(".button").hover( function ()
        {
             $(this).attr( "src" , split[1] );
        },
        function ()
        {
             $(this).attr( "src" , split[0] );
        });
    })
    $(this).click(function() {
                $("#Section").toggle();
});
</script>
<table id="Section" style="display:none;">

Place following code into the HTML BLOCK / DISABLED / AFTER THE SECTION AFTER THE ACCORDION

</table>

Make sure that you have removed your original code from the Footer.

 

Regards,

vitalikssssss  

[Alwayslost]

Thank you for the respond. I did as you said.

The image changes on hover.

It doesn't have the hover effect though, where you see a hand vs the pointer.

Also, it doesn't open the section below it.

Please let me know if I have done the code correctly. I really do like the code hopefully you can help me to make it respond.

Header code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

HTML Block before section:

<div id="button">
<center><img src="http://assets.goplaypool.com/files/theme/appcas/search01.png" alt="My button" class="button"> </center>
</div>

<script>

var split = new Array();
    
    split[0] = "http://assets.goplaypool.com/files/theme/appcas/search01.png";
    split[1] = "http://assets.goplaypool.com/files/theme/appcas/search011.png";
    
    $(document).ready(function()
    {
        $(".button").hover( function ()
        {
             $(this).attr( "src" , split[1] );
        },
        function ()
        {
             $(this).attr( "src" , split[0] );
        });
    })
    $(this).click(function() {
                $("Section2").toggle();
});
</script>
<table id="Section2" style="display:none;">

 

Section with options in it:

 

HTML Block:

</table>

 

Image attached from the caspio datasheet. 
And I deployed it as well, in case you want to use the link:

https://c2cre726.caspio.com/dp.asp?AppKey=57fa40004fa7521e48084aafb6e2

 

 

Thanks in advance

 

[Alwayslost]

And here is the image of the section set up on Caspio datapage

[Vitalikssssss]

Hi Alwayslost,

You have made a small syntax error which I have highlighted in red.

 

 

Quote

 

HTML Block before section:

<div id="button">
<center><img src="http://assets.goplaypool.com/files/theme/appcas/search01.png" alt="My button" class="button"> </center>
</div>

<script>

var split = new Array();
    
    split[0] = "http://assets.goplaypool.com/files/theme/appcas/search01.png";
    split[1] = "http://assets.goplaypool.com/files/theme/appcas/search011.png";
    
    $(document).ready(function()
    {
        $(".button").hover( function ()
        {
             $(this).attr( "src" , split[1] );
        },
        function ()
        {
             $(this).attr( "src" , split[0] );
        });
    })
    $(this).click(function() {
                $("#Section2").toggle();
});
</script>
<table id="Section2" style="display:none;">

 

 

 

 

Regards,

vitalikssssss

 

[Alwayslost]

God bless you. I was going crazy here. 
It doesn't have the hand/pointer effect but it works perfect. 

Is there a part of script that created the hover pointer to hand action?

If not, this is perfect.

 

Thank you very much for responding to me and helping me on this.

I love the forum here, but rarely do I get a respond on anything. Maybe I am not posting in the right areas.

Anyways...

Have a great day and thanks again

[Alwayslost]

Just so you know. The code works to an extend. When you go to press on the dropdown menu that is "inside" the Section, the accordion closes.
Plus I change the Section numbers for a second accordion and they still sort of function together and not working separately. 
thanks for your help anyways, but I have to scratch it and stick to basic "just image"  
Have a good day

[MayMusic]

This might help

 

[Alwayslost]

Thank you MayMusic for clarifying. 
Awesome... 

[Alwayslost]

This works perfect MayMusic... Thank you.

Question:

Since there is no "field" or "parameter" option under "Rules" for me to "hide" zip code search WHILE disabling it (you can't have both options), I have disabled zip code if one field in the first accordion is filled in. (Zip Code Search is in the second accordion)

So, is there a way to NOT allow the 2nd accordion to open unless the first accordion; is closed and/or the first drop down under it remains: blank value?
I hope I made it clear, not sure how else to explain it. 
here is the test link as well: http://www.goplaypool.com/testgogo11.html

Thank you,

-Alwayslost