Using jQuery in this plugin

Hi Marek,

Let me give you a quick jQuery example:

Firstly create a code block, call it “Slider Test – HTML” and add this code:

<div class="show_hide"><a href="#">Show/hide</a></div>
<div class="slidingDiv">
Fill this space with really interesting content. <a href="#" class="hideMe">hide</a></div>

There is no need to assign this HTML code block because we will output it with a shortcode.

Then create another code block for your CSS and call it something like “Slider Test – CSS”, then and add this code:

<style type="text/css">
.slidingDiv {
    height:300px;
    background-color: #ededed;
    padding:20px;
    margin-top:10px;
    border-bottom:5px solid #3399FF;
}

.show_hide {
    display:none;
}
</style>

You will want to assign this to the Page or Post that you created for your jQuery script – let’s say it was called “Slider Test”.

Next you create you last code block, which is a JavaScript block for your jQuery, call it something like “Slider Test – JS”, and add this code:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
<script type='text/javascript'>
$(window).load(function(){
    $(".slidingDiv").hide();
    $(".show_hide").show();

    $('.show_hide').click(function(){
        $(this).next().slideToggle();
    });

    $('.hideMe').click(function(){
        $(this).parent().slideUp();
    });
});
</script>

Make sure all of your code blocks are saved and then go into your “Slider Test” page or post and add this shortcode in the editor.
[cjtoolbox name='Slider Test - HTML' ] [/cjtoolbox]

And update your page/post and view it. You are now running a jQuery script on your website.
Hope that helps.

Regards,
Damian Baker