-1

I have this code and I want to use it in a joomla site. I've been trying to put it into an article or a module using codemirror, jce or no editor at all, but the toggling doesn't work at all and as result the answer won't show. I've also tried to put it into an iframe but there was a problem with the auto height and no fix was good enough. Any help would have been highly appreciated, 'cause after 48 hours of searching the web for a solution, it seems like I'm in a dead end right now. Thanks in advance!

<script src="diabetes-faq/js/jquery-1.9.1.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#faq-list h2').click(function() {

                $(this).next('.answer').slideToggle(500);
                $(this).toggleClass('close');

            });
        }); // end ready
    </script>
<body>
<div id="wrapper">
<div id="main">
           <section id="faq-list">

                <h2>Question No1</h2>
                <div class="answer">
                    <p>blah blah blah</p>
                </div>


                <h2>Question No2</h2>
                <div class="answer">
                    <p>blah blah </p>
                </div>


                <h2>Question No3</h2>
                <div class="answer">
                    <p>blah blah blah</p>
                </div>

</section>
</div>
</div>
</body>
vagiag
  • 3
  • 6
  • Do not start adding in custom code to your Joomla article or module. It doesn't work like this. You need to use an extension such as Sourcerer by NoNumber – Lodder Nov 20 '14 at 18:36
  • Thanks for the suggestion! I've just tried Sorcerer. If I understood it correctly the only thing I had to do was to place the whole code between {source}{/source} tags. Unfortunately it didn't make any difference. The hide/show thing still don't work :( Do I need to do something else in addition to the source opening/closing tags? – vagiag Nov 20 '14 at 19:07
  • It seems that there is a conflict between JQuery and mootools, which was partly solved by replacing $() with jQuery(). It messed with the css somehow, but it worked and made the answers hide/show. I only hope that I can fix the css styling back to what it was! – vagiag Nov 20 '14 at 19:52

1 Answers1

0

Just adding this as a proper answer so it's easier to see. So you mentioned a conflict between jQuery and Mootools.

In this case, you're right, the global scope should be changes but you can also use an alias which get's passed through.

Also, if you're using Joomla 3.x then do not import your own copy of jQuery. I wrote an answer back which shows you to import jQuery in Joomla 2.5 and 3.x:

Importing jQuery into Joomla

As for the script, I would suggest using this:

<script>
    jQuery(document).ready(function($) 
    {
        $('#faq-list h2').on('click', function() 
        {                
            var $self = $(this);

            $self.next('.answer').slideToggle(500);
            $self.toggleClass('close');

        });
    });
</script>

Update:

The reason why you're slideDown is a little glicthy is because you're using floats which are not good to use with animations such as slideDown.

On line 30 of your style.css file, you need to change 

h2.close {
    float: left;
}

to:

h2.close {
    float: none;
}
Community
  • 1
  • 1
Lodder
  • 19,758
  • 10
  • 59
  • 100
  • Thanks for all your trouble! I'll check the script you proposed and I'll come back tomorrow with some useful feedback. May I ask you about the alias you mentioned? Excuse my ignorance, but I'm still a rookie to web design/developing and I've just started taking my first steps into javascript and php, apart from html & css. – vagiag Nov 21 '14 at 02:27
  • I'm back with some feedback. Your script worked just fine and I imported jQuery with your method to prevent multiple copies of jQuery, so thanks about that! I still having some trouble though with the messed css and I'm trying to find out what to do about that. – vagiag Nov 21 '14 at 14:29
  • @vagiag - This script shouldn't mess with any CSS. Which CSS is being screwed up? Could you possibly provide a link to your site? – Lodder Nov 21 '14 at 16:23
  • Yes of course... you can see the problem here: http://boufas.websters.gr/index.php/endocrine-disturbance/hypertrichosis . I had color problems which I solved, but I still can't fix the align of the answer when I click the + sign to reveal the answer. I should mention that when I use the same code out of joomla everything works just fine – vagiag Nov 21 '14 at 16:44
  • @vagiag - Which bit am I supposed to be looking at? – Lodder Nov 21 '14 at 16:45
  • It worked like a charm!!! You are very kind! Thank you for all the time you spend on this! I didn't know that floating and animations don't work good together! Thanks again!!! – vagiag Nov 21 '14 at 17:02