Jump to content

Recommended Posts

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

Link to comment
Share on other sites

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  

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

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.
Note: Your post will require moderator approval before it will be visible.

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.

Loading...
 Share

×
×
  • Create New...