CODEWITHSUNDEEP
jqueryhtmlcss
omega1
omega1

Reputation: 1052

jQuery multiple show/hide div issue

I am having an issue whereby there are multiple instances of some code I am using to show/hide divs. The issue is that if I click one of the buttons, all of the divs show, but I'm not sure why that is happening as the divs have different classes.

My intention is that, in this example, when the page loads, it shows the content of <div class="red-top1> and <div class="red-top2> and when I press button mybuttontop1 is shows <div class="green-top1> but instead it shows both <div class="green-top1> AND <div class="green-top2"> which is not the expected behaviour, I was expecting each div to show independently on each button press.

Not sure what I am doing wrong?

Thanks.

Here are the relevant pieces of code:

function ButtonTextTop2() {
    if ($("#green-top2").is(":visible")) {
        $("button").text("Show less...");
    } else {
        $("button").text("Show more...");
    }
}
ButtonTextTop2();
$("button").click(function () {
    $("#green-top2").toggle();
    $("#red-top2").toggle();
    ButtonTextTop2();
});

function ButtonTextTop1() {
    if ($("#green-top1").is(":visible")) {
        $("button").text("Show less...");
    } else {
        $("button").text("Show more...");
    }
}
ButtonTextTop1();
$("button").click(function () {
    $("#green-top1").toggle();
    $("#red-top1").toggle();
    ButtonTextTop1();
});
#red-top1 {
}
#green-top1 {
    display:none;
}
#red-top2 {
}
#green-top2 {
    display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="red-top1">
    Code here
</div>
<div class="green-top1">
    Other code here
</div>

<div class="red-top2">
    Code here
</div>
<div class="green-top2">
    Other code here
</div>

<button class="mybuttontop1">Show more...</button>
<script type="text/javascript">

</script>


<button class="mybuttontop2">Show more...</button>

Upvotes: 1

Views: 70

Answers (2)

dj079
dj079

Reputation: 1389

The Selectors are all wrong. You are trying to access Style Class selector (.) but using Element Id selectors (#).

Just change the "#" in all your Script code and Style code and you should be good to go.

For Example:

Javascript

Use: if ($(".green-top1").is(":visible")) {

Instead of: if ($("#green-top1").is(":visible")) {

Style

Use: .green-top1 {

Instead of: #green-top1 {

Notice the "#" replaced by "."

Here is your working code: https://jsfiddle.net/12toxyn9/

Updating answer with correct code: https://jsfiddle.net/2p90cehb/

The change was also required in the binding of click event of the buttons. Your previous code was attached with the click event of both buttons, hence, whenever one button was click, both events were getting triggered. Changing it to individual button's click event fixed the issue.

Use: $(".mybuttontop1").click(function () { and $(".mybuttontop2").click(function () { for respective button.

Instead of: $("button").click(function () { for both functions.

Upvotes: 2

Edward Perpich
Edward Perpich

Reputation: 57

I believe it is because you are using the id tag selector $("#green-top"), and not the class tag selector $(".green-top").

This also goes for the CSS. You are not defining classes, you are defining styling for IDs. To define the class green-top, you would have 

    .green-top {
        style: here;
    }

I'm sure this is causing the inconsistencies in what you're seeing.

Upvotes: 1

Related Questions