CODEWITHSUNDEEP
jquery
iJup
iJup

Reputation: 281

Toggle text is not appearing

In some other cases the .toggle() command works really fine. Even comparing these parts of code didn't solved the problem so I need your help! When clicking on Learn more it has to disappear and the text in <c> has to appear. But it appears for a second and after this it is disappearing to.

Thanks in advance!

$(document).ready(function() {
    $(".interests").click(function() {
        $(".interests").fadeToggle(300);
        $(".int").fadeToggle(300);
    });
});
.supporting {
    padding-top: 80px;
    padding-bottom: 100px;

}

.supporting .col {
    float: left;
    width: 33%;
    font-family: 'Raleway', sans-serif;
    text-align: center;
    margin-bottom: 24px;
}

.supporting img {
    height: 32px;
    margin-top: 40px;
}

.supporting h2 {
    font-weight: 600;
    font-size: 23px;
    text-transform: uppercase;
    padding: 0 50px;
    margin-bottom: 30px;
}

.supporting a {
    font-size: 10px;
    color: rgb(51,51,51);
    font-weight: 600;
    border: 1px solid rgb(51,51,51);
    padding: 15px 50px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1.1px;
}

.supporting .int c {
    font-size: 10px;
    color: rgb(51,51,51);
    padding: 15px 50px;
    text-align: center;
    vertical-align: middle;
}
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>JFP</title>
    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
        <link rel="stylesheet" href="/static/main.css" >
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="/static/app.js"></script>
</head>

<div class="supporting">
    <div class="container">
        <div class="col">
            <img src="https://s3.amazonaws.com/codecademy-content/projects/broadway/deploy.svg">
            <h2>Support</h2>
            <p></p>
            <div class="interests">
                <a>Learn more</a>
                <div class="int" style="display:none">
                    <c>Lorem ipsum.</c>
                </div>
            </div>
        </div>
  </div>
</div>

Upvotes: 0

Views: 96

Answers (2)

Yahya Uddin
Yahya Uddin

Reputation: 28901

The issue is you're hiding the entire container and not the individual element.

It should be like this:

<div class="supporting">
    <div class="container">
        <div class="col">
            <img src="https://s3.amazonaws.com/codecademy-content/projects/broadway/deploy.svg">
            <h2>Support</h2>
            <p></p>
            <div class="interests">
                <a class=learn-more">Learn more</a>
                <div class="int" style="display:none">
                    <c>Lorem ipsum.</c>
                </div>
            </div>
        </div>
  </div>
</div>

and your code like this:

$(document).ready(function() {
    $(".interests").click(function() {
        $(".learn-more").fadeToggle(300);
        $(".int").fadeToggle(300);
    });
});

What you were doing was hiding the entire .interests container. this means even though .int and .learn-more may be visible; the fact the parent class .interests is not visible, means all child elements and the button it self are no longer visible.

Thus you also weren't able to click the button again as it's no longer visible on the page!

Upvotes: 1

GAMITG
GAMITG

Reputation: 3818

You just need to remove interests class from div and add same class to anchor tag. like as,

<div class="supporting">
    <div class="container">
        <div class="col">
            <img src="https://s3.amazonaws.com/codecademy-content/projects/broadway/deploy.svg" width='20px'>
            <h2>Support</h2>
            <p></p>
            <div>
                <a class="interests">Learn more</a>
                <div class="int" style="display:none">
                    <c>Lorem ipsum.</c>
                </div>
            </div>
        </div>
  </div>
</div>

And I have created JSfiddle check it out.

Upvotes: 1

Related Questions