Note that there are some explanatory texts on larger screens.

plurals
  1. POJquery toggleClass and expand/collapse image
    primarykey
    data
    text
    <p>I am having an issue combining two functions that work independently correctly, was hoping to gain some insight. I know this has todo with the id/class declarations, I am just not sure how to effectively accomplish showing/hiding a div and having the image function incorporated my toggle is as follows: (in the doc ready)</p> <pre><code> $('.acc_container #info').hide(); $('.acc_container #showInfo').click(function(){ $(this).toggleClass("active").next().slideToggle("slow"); return false; //Prevent the browser jump to the link anchor }); </code></pre> <p>my image expand collapse function: (in the doc ready)</p> <pre><code> $('.acc_container #showInfo img').live('click', function () { if ( this.src.match('details_close') ) { this.src = "..images/details_open.png"; } else { this.src = "../images/details_close.png"; } }); </code></pre> <p>the html is as follows</p> <pre><code> &lt;div id='showInfo'&gt; &lt;img src="../images/details_open.png" /&gt; &lt;p&gt;Expand Specific info&lt;/p&gt; &lt;/div&gt; &lt;div id='info'&gt; &lt;p&gt;revealed&lt;/p&gt; &lt;/div&gt; </code></pre> <p>any assistance is greatly appreciated!</p> <p><strong>EDIT</strong></p> <p>end result of what i want to accomplish in imagery</p> <p>prior to clicking the #showInfo div <br></p> <p><a href="http://desmond.imageshack.us/Himg834/scaled.php?server=834&amp;filename=expand.gif&amp;res=medium" rel="nofollow noreferrer">expand http://desmond.imageshack.us/Himg834/scaled.php?server=834&amp;filename=expand.gif&amp;res=medium</a> <br> after clicking the #showInfo div <br> <br></p> <p><a href="http://desmond.imageshack.us/Himg12/scaled.php?server=12&amp;filename=collapsezh.gif&amp;res=medium" rel="nofollow noreferrer">collapse http://desmond.imageshack.us/Himg12/scaled.php?server=12&amp;filename=collapsezh.gif&amp;res=medium</a></p> <p>So the #info div shows and hides onclick, and the image toggles on/off to give the client expand collapse look</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload