CODEWITHSUNDEEP
jquerywordpress
Piyush-Ask Any Difference
Piyush-Ask Any Difference

Reputation: 4286

jQuery show hide plugin not working

This is regarding the following jQuery plugin: http://blog.danawoodman.com/jquery-showhide/

I am using jQuery show hide plugin on my wordpress site. But running into issues with same. The following code on a simple HTML file works fine for me:

<!DOCTYPE html>
<html>
    <head>
        <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js?ver=3.3.1'></script>
        <script type="text/javascript" src="jquery.cookie.js"></script>
        <script type="text/javascript" src="jquery.showhide.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $('#ex-6').showhide({
                    use_cookie: true,
                    cookie_name: 'example_6'
                });   
            });

        </script>
    </head>
    <body>
           <p>
               <a href="#" title="Toggle the span" id="ex-6">off</a>
                  <span>ABC</span>
           </p>
    </body>

</html>

To make above work with wordpress, I do the following:

1) Edit Header.php file of wordpress and add the following lines in section

 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js?ver=3.3.1'></script>
    <script type="text/javascript" src="/wp-content/themes/mystique/js/jquery.cookie.js"></script>
    <script type="text/javascript" src="/wp-content/themes/mystique/js/jquery.showhide.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#ex-6').showhide({
                use_cookie: true,
                cookie_name: 'example_6'
            });   
        });

    </script>

2) Create a sidebar widget and add the following code:

<p>
    <a href="#" title="Toggle the span" id="ex-6">off</a>
    <span>ABC</span>
</p>

Note the path where I have uploaded the required javascript libraries

I tried disabling all plugins but still no effect.

The above doesn't work on the blog. You can check the same on: http://extreme-java.com/check-java-iq/

Could you please suggest where did I make a mistake.

Upvotes: 0

Views: 683

Answers (2)

Denish
Denish

Reputation: 2810

By looking your source code, it seems that you want "jquery tabs functionality" on wordpress page

why don't you try wordpress tabs plugin see 3rd screen-shpt

and in addition,if you want this page as sidebar, you can use pages/post as sidebar plugin.

i think this is better options to achieve this functionality

hope it will help you.

Upvotes: 1

umbriel
umbriel

Reputation: 751

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js?ver=3.3.1'></script>

Try to avoid single quotes, try this instead:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js?ver=3.3.1"></script>

Upvotes: 0

Related Questions