problem with javascript/jquery in joomla article - Joomla! Forum - community, help and support

hi all,

hope can query have regarding subject above.

i'm trying use jquery article reason not working. simple show/hide function 4 areas: about, history, people , resources. click open section, , hide it. however, when place code in article nothing happens.

this code in article:

code: select all

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<style scoped="scoped" type="text/css"><!--
    .headings{ background-color:#cccccc; color:#000000;margin:5px 0 5px 0; padding:5px; width:100%;}
    .view_btn{ float:right;}
    .subdiv{ border: dashed 1px grey; margin:5px 0 5px 0; padding:5px;}
    .hide{ display:none;}
    .members_div_img {float:left; padding-right:10px; }
    .mentors_div_img{float:left; padding-right:10px;}
    p, ul li{font-family: arial, verdana;}
    ul li{ line-height:18px;}
    .innov_pic{ padding-right:10px;}
    --></style>
<script type="text/javascript">// <![cdata[
 
   
    (function ($) {
        $.fn.showhide = function (options) {
            //default vars plugin
            var defaults = {
                speed: 1000,
                easing: '',
                changetext: 0,
                showtext: 'show',
                hidetext: 'hide'
            };
            var options = $.extend(defaults, options);
            $(this).click(function () {
                $('.togglediv').slideup(options.speed, options.easing);
                // var stores button you've clicked
                var toggleclick = $(this);
                // reads rel attribute of button determine div id toggle
                var togglediv = $(this).attr('rel');
                // here toggle show/hide correct div @ right speed , using easing effect
                $(togglediv).slidetoggle(options.speed, options.easing, function () {
                    // fires once animation completed
                    if (options.changetext == 1) {
                        $(togglediv).is(":visible") ? toggleclick.text(options.hidetext) : toggleclick.text(options.showtext);
                    }
                });
                return false;
            });
        };
    })(jquery);
    // ]]></script>

<div class="headings">about: <a href="#" class="show_hide view_btn" rel="#slidingdiv">view</a><br />
    <div id="slidingdiv" style="display: none;">
        <h3>introduction</h3>
        <img src="images/innovation_group1.jpg" align="right" border="0" />
        <p> info here:</p>
        <ul>
            <li>list</li>
        </ul>
        <img src="images/innovation_group2.jpg" align="left" border="0" class="innov_pic" />
        <p>more info.</p>
        <p>they will:</p>
    </div>
</div>



ive tried link external .js file using:

code: select all

<?php
// add path parameter if path different 'media/system/js/'
jhtml::script('sample.js', 'templates/custom/js/');
?>

and

code: select all

<?php
$document = &jfactory::getdocument();
$document->addscript('/media/system/js/sample.js');
?>

as suggested - http://docs.joomla.org/adding_javascript, no joy.

any help/pointers welcome.

ps. included 1 section above - 'about' - example.

kind regrads
mg

the code posted doesn't work.