Need help with JS accordion menu

distort13 · 08-30-2012, 01:34 AM

Hello there, I am new to the forum and need some help with an accordion menu. I am not very familiar with javascript and any help would be appreciated.

my question or problem is this: I need the link that opens the menu to also close the menu. here is what I have so far.

The JS

Code:

   $('.gradient_block .show').click(function(event){
        var wrap = $(this).parents('.gradient_block');
        $('.desc', wrap).show();
        event.preventDefault();
    });

The link that opens the menu is View pricing & channel listing.
here is the HTML

Code:

<div class="gradient_block with_border">
                            <table cellpadding="0" cellspacing="0" border="0" width="100%">
                                <tr>
                                    <td class="column_left">
                                        <img src="img/channels_180.png" alt="" width="147" height="63" />
                                    </td>
                                    <td class="column_right">
                                        <div class="title_gradient_block">COMMERCIAL XTRA&trade; Pack</div>
                                        <p>Pack offers access to over 180 channels of the best in news, sports, and entertainment as well as over 30 specially and regional sports networks and local channels - all for one low, all inclusive price. With this package you are sure to please even the toughest customer!</p>
                                        <div><a href="" title="" class="show">View pricing &amp; channel listing</a></div>
                                    </td>
                                </tr>
                            </table>

                            <div class="desc">
                            <div style="padding:25px 0 0 32px">
								<table cellpadding="0" cellspacing="0" width="674" style="text-align:left">
									<tr><td width="50%" valign="top">
									AUDIENCE Network&trade; HD<br>
									A&E HD<br>
									ABC Family HD<br>
									American Movie Classics HD<br>
									Animal Planet HD<br>
									BBC America<br>

Once again any help is appreciated, and if more information is need to help solve the problem let me know and will post it.

Thank you.

Lukie · 08-30-2012, 02:57 PM

this is very unclear to me and i think to everyone here..

Is that the whole HTML code ur showing here? (guess not)
What works or doesn't work, what have you tried urself?

distort13 · 09-05-2012, 04:59 AM

Quote:

Originally Posted by Lukie

this is very unclear to me and i think to everyone here..

Is that the whole HTML code ur showing here? (guess not)
What works or doesn't work, what have you tried urself?

Lukie good points.

As I am not a JS expert I have tried only a few things with the script to get it to close but none of them seemed to work or they would break the whole thing and it would not open at all.

Below is the code for the accordion part that opens:

Code:

                        <div class="gradient_block">
                            <table cellpadding="0" cellspacing="0" border="0" width="100%">
                                <tr>
                                    <td class="column_left">
                                        <img src="img/channels_30.png" alt="" width="146" height="63" />
                                    </td>
                                    <td class="column_right">
                                        <div class="title_gradient_block">COMMERCIAL BASIC&trade;</div>
                                        <p>This base package is especially designed for international viewers to customize with international TV packages. Enjoy over 30 English-language channels, including DIRECTV's exclusive AUDIENCE Network&trade; and local channels.</p>
                                        <div><a href="" title="" class="show">View pricing &amp; channel listing</a></div>
                                    </td>
                                </tr>
                            </table>
							<div class="desc">
								<div style="padding:24px 0 0 32px">
									<table cellpadding="0" cellspacing="0" width="674" style="text-align:left">
										<tr><td width="50%" valign="top">
										AUDIENCE Network&trade; HD<br>
										BYU TV<br>
										Christian Television Network<br>
										Church Channel<br>
										C-Span<br>
										C-Span 2<br>
										Daystar<br>
										DIRECTV A&ndash;Z Channel Guide<br>
										DIRECTV Customer Support<br>
										Enlace<br>
										EWTN<br>
										Free Speech TV<sup>&dagger;</sup><br>
										GOD TV<br>
										Golden Eagle Broadcasting<sup>&dagger;</sup><br>
										HD Theater HD (only in HD)<br>
										HDNet HD (only in HD)<br>
										HITN<br>
										Home Shopping Network<br>
										Hope Channel<br>
										Jewelry TV<br>
										Jewish Life Television</td><br>
										<td width="50%" valign="top">Link TV<br>
										Nasa TV<br>
										NRB Network<br>
										ONCE M&eacute;xico<br>
										QVC<br>
										ShopNBC<br>
										TCT Network<br>
										Trinity Broadcasting Network<br>
										Word Network<br>
										World Harvest Television<br>
										V-me<br>
										<b>Local channels where available</b><br>
										</td>
										</tr>
									</table>
									<br /><br />
									<!-- Pricing -->
									<table width="200" style="text-align:left">
										<tr>
										<th valign="bottom" align="left">Monthly Fee</th>
										</tr>
										<tr><td>$19.99</td>
										</tr>
									</table>
									<br /><br />
									<div class="inline-legal-dark">^Local channel availability based on service address.</div>
									<br /><br />
								</div>
									
                                <div class="clear"></div>
                                <span>[<a href="/" title="Close" class="close">Close</a>]</span>
                            </div>
                            <div class="clear"></div>
                        </div>

Also here is a link to one of the actual pages.
http://www.nationalsatellitecenter.c...agesAndPricing

I hope this helps and if there is anything else, please let me know and I will include it.

Thanks again.