2

I am trying to use the toggle code I found here: http://jsfiddle.net/wGbh5/. It seemed pretty straight forward and doing exactly what I want.

So I had the following code in my style.css file:

.clickme {
background-color: #eee;
border-radius: 4px;
color: #666;
display: block;
margin-bottom: 5px;
padding: 5px 10px;
text-decoration: none;}

.clickme:hover {
    text-decoration: underline;
}

Then I created a toggle.js file containing this code:

// Hide all the elements in the DOM that have a class of "box"
$('.box').hide();
// Make sure all the elements with a class of "clickme" are visible and bound
// with a click event to toggle the "box" state
$('.clickme').each(function() {
    $(this).show(0).on('click', function(e) {
        // This is only needed if your using an anchor to target the "box" elements
        e.preventDefault();

        // Find the next "box" element in the DOM
        $(this).next('.box').slideToggle('fast');
    });
});

and I called both file in my html using, in the header, using the lines

<link rel="stylesheet" href="http://localhost:8888/kirby/assets/styles/styles.css" />
<script src="http://localhost:8888/kirby/assets/js/toggle.js"></script>

As you can see in the link, I am working locally using MAMP and trying out the CMS Kirby.

In the HTML file, the code looks like this:

<a href="#" class="clickme">Click Me</a>
<div class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
    when an unknown printer took a galley of type and scrambled it to make a type
</div>

The problem is, when I load the html file in my browser, it does not work (I would be here if it worked right?). Both the "clickme" and the "box" content are displayed and nothing appends when I click them.

Can anyone help me with my problem?

Thanks a lot in advance

Ahmad Alfy
  • 13,107
  • 6
  • 65
  • 99
Wiliam
  • 179
  • 11
  • 1
    Since your fiddle works, there must be something in your page that creates the problem. There is no way to debug something that works. – RoToRa Mar 19 '13 at 12:29
  • Have you included jQuery on your page? Because what you've posted won't work without it. – suryanaga Sep 27 '13 at 16:01

1 Answers1

0

it's probalby the way you are calling your css and js file that is the problem. the correct way to call a css file with kirby would be for css 

<?php echo css('assets/styles/styles.css') ?>

and for js

<?php echo js('assets/js/toogle.js') ?>
Antoine Champagne
  • 1
  • 1