CODEWITHSUNDEEP
jqueryhtmlhide
nando
nando

Reputation: 377

Jquery DIV .hide() doesnt work

I have 4 DIVs at load i want 3 hidden.. on click (tab links) i want to show the content for that tab.. and hide the rest.. this is what i have.. its not working =(

http://codepen.io/anon/pen/AafIH

<script type='text/javascript' src='http://mimerchant.com/wp-includes/js/jquery/jquery.js'></script>
<div class="tabnav">
    <ul class="fancyNav">
        <li id="news"><a href="#creditcard" id="creditcard_link">Credit Card Processing</a> 
        </li>
        <li id="about"><a href="#atm" id="atm_link">ATM Processing</a>
        </li>
        <li id="services"><a href="#giftcard" id="giftcard_link">Gift Card Program</a>
        </li>
        <li id="contact"><a href="#check" id="check_link">Check Guarantee</a>
        </li>
    </ul>
</div>
<div class="tabcontent">
    <div id="creditcard">
        <div id="textbox">
             <h3>Credit Card Processing</h3>

            <p>Some Text here about what this credit card tab is about</p>
             <h3>Low Rates</h3>

            <p>About Low Rates</h3>
        </div>
    </div>
    <div id="atm">
        <div id="textbox">
             <h3>ATM Processing</h3>

            <p>Some text here about the ATM services</p>
             <h3>Another Title</h3>

            <p>Some text</p>
        </div>
    </div>
    <div id="giftcard">
        <div id="textbox">
             <h3>Gift Card Program</h3>

            <p>Something about gift cards</p>
        </div>
    </div>
    <div id="check">
        <div id="textbox">
             <h3>Check Guarantee</h3>

            <p>Something About Checks</p>
        </div>
    </div>
</div>

Upvotes: 0

Views: 169

Answers (3)

seniorpreacher
seniorpreacher

Reputation: 666

As I can see, your included jQuery instance is not working. Try replacing it from here

Upvotes: 0

Chris Hanson
Chris Hanson

Reputation: 2083

In CodePen, the JS snippet is getting loaded before your jQuery call in the HTML. You can fix this on CodePen by clicking the gear icon at the top of the JS pane and add jQuery to the library list. When you actually put together an HTML page to run locally, import jQuery before importing the script you're writing.

If you have trouble implementing this script in the future, check the JavaScript console. This error usually means that jQuery wasn't imported:

Uncaught TypeError: Property '$' of object [object Object] is not a function

Upvotes: 1

Kenneth
Kenneth

Reputation: 28737

Your code is working fine if you include jQuery.

In the right top corner, there's an icon which lets you select a framework to include

Upvotes: 1

Related Questions