CODEWITHSUNDEEP
jquery
Mr. Zoidberg
Mr. Zoidberg

Reputation: 524

jQuery Class Toggle Trouble

I have contact page in Turkish. Don't be afraid. I will translate for you. It's very simple.

http://www.zinzinzibidi.com/web_tasarim/iletisim

You can view source code or use Firebug.

This is my page. And I can't hide/show some unrequired divs with toggle() function.

For instance,

       <div class="contact-line">
            <div class="contact-title">
                <span>e-posta</span>
            </div>
            <div class="contact-input">
                <input type="email" class="input" required />
            </div>
        </div>

        <div class="contact-line-unrequired">
            <div class="contact-title">
                <span>Tel</span>
            </div>
            <div class="contact-input">
                <input type="tel" class="input" />
            </div>
        </div>

There is two div as required and unrequired. And there is a button that I wanna use to toggle.

        <div class="required-areas-button">
            <span>Sadece gerekli alanları göster</span>
        </div>

And here is my jQuery codes:

<script>
    $(document).ready(function () {
        $(".required-areas-button").click(function () {
            $(".contact-line-unrequired").toggle();
        });
    });
</script>

Where did I do wrong?

*"Sadece gerekli alanları göster" means "Show only required areas"

Solved

Thank you all!

I changed my Jquery codes a little bit:

        <script>
            $(document).ready(function ($) {
                $(".required-areas-button").click(function () {
                    $(".contact-line-unrequired").slideToggle();
                });
            });
        </script>

Here is the results:

http://www.zinzinzibidi.com/web_tasarim/iletisim

Upvotes: 0

Views: 78

Answers (2)

James Lai
James Lai

Reputation: 2071

You're loading jQuery after you attempt to call these functions, so they are not being bound. If you load up your console, you should actually see a $ is not defined error. Ensure that jQuery is being included before you attempt to use it on the page.

Upvotes: 1

Alexander
Alexander

Reputation: 809

You have on page the code:

<script>
    $(document).ready(function () {
        $(".required-areas-button").click(function () {
            $(".contact-line-unrequired").toggle();
        });
    });
</script>

before including jQuery:

<script src="/web_tasarim/Scripts/jQuery-1.8.3.min.js"></script>

put inline script at the end of body.

Upvotes: 1

Related Questions