jquery slidetoggle() not working in Joomla but works when not using Joomla

Question

I am using the slidetoggle function to show/hide a div on a Joomla 3 template. It is not working in joomla but it is working when I use it outside of Joomla.

I read jQuery slideToggle doesn't work on joomla, but works on jsbin

and put my script at the bottom of the page but that didn't help.

It works here outside of Joomla working slidetoggle but not when I put it in the template's index.php file non-working slidetoggle

In the Joomla template index.php, I have loaded jquery (version 1.10.2 comes with Joomla 3) and jqueryui

// Add JavaScript Frameworks
JHtml::_('bootstrap.framework');
JHtml::_('jquery.framework');
JHtml::_('jquery.ui');

I've inserted:

<div class="toggalcontainer">
    <div id="showHideDiv">Welcome To FaceBook.</div>
    <i id="divtoggle" class="slideit"></i>
</div>

<script type="text/javascript">   
$(document).ready(function(){    
    $( "#divtoggle" ).click(function() {
      $( "#showHideDiv" ).slideToggle( "slow", function() {
        // Animation complete.
        $("#divtoggle" ).toggleClass('down')

      });
    });
});
</script>

in index.php where the div should display.

The css is

#showHideDiv{
    color: #fff;
    background-color:#47639E;
    padding:10px;

}
.toggalcontainer{
    width:100%
} 
.slideit {
    cursor: pointer;
    padding: 10px;
    position: absolute;
    right: 25px;
    text-align: center;
    top: 8px;
    background-image: url("../light.png");
    background-repeat: no-repeat;
}
.up{

}
.down{
  background-position: -63px 0 ;
}

It's displaying, I just can't figure out why it won't toggle. I replaced all '$' with 'jquery' because Joomla docs use jQuery instead of $ doc says to use jquery namespace instead of $, but that did nothing so I changed it back to $.

Answer 1

You do not need to use the all of the following:

JHtml::_('bootstrap.framework');
JHtml::_('jquery.framework');
JHtml::_('jquery.ui');

All 3 of these lines import jQuery in noConflict mode.

You can remove JHtml::_('jquery.framework');.

As you're using noConflict mode, you need to replace your jQuery with the following:

jQuery(document).ready(function($){    
    $("#divtoggle").on('click', function() {
        $("#showHideDiv").slideToggle("slow", function() {
            $('#divtoggle').toggleClass('down');
        });
    });
});

As you can see, I have used jQuery in the global scope, and passed $ through as an alias. I've also tweaked the click function.

Hope this helps