user3601990 user3601990 - 2 months ago 5
jQuery Question

How to change content by click jQuery?

I have blocks on a page and two buttons. I want the next scenario: if I click a button "Show red blocks" nothing happens, because red blocks are already on a page. If I click a button "Show green blocks" - green blocks (large and small) are appeared on a page (red blocks are disappeared). If I click the button "Show red blocks" then red blocks appear instead green blocks.

Code does not work correctly and there is an error. I can't manage what is the problem. I've read about innerHtml, but I think it is useless in my case.



$(document).ready(function() {
$('.btn-green').click(function showred() {
$('.block-green').toggleClass('show');
$('.block-red').toggleClass('hide');
});

$('.btn-green').click(function showgreen() {
$('.block-green-small').toggleClass('show');
$('.block-red-small').toggleClass('hide');
});


$('.btn-red').click(function() {
$('.block-green').toggleClass('hide');
$('.block-red').toggleClass('show');
});

$('.btn-red').click(function() {
$('.block-green-small').toggleClass('hide');
$('.block-red-small').toggleClass('show');
});

});

.container-large {
max-width: 800px;
height: 200px;
margin: 10px auto 10px;
padding: 5px;
border: 1px solid #000;
}
.container-small {
max-width: 200px;
height: 200px;
margin: 10px auto 10px;
padding: 5px;
border: 1px solid #000;
}
p {
text-align: center;
}
.btn-red {
margin-bottom: 5px;
}
.btn {
width: 200px;
height: 30px;
border: 1px solid black;
border-radius: 7px;
font-family: sans-serif;
color: #fff;
text-align: center;
}
.btn-red {
background-color: red;
}
.btn-green {
background-color: green;
}
.block-red {
width: 100%;
height: 200px;
background-color: red;
display: block;
}
.block-green {
width: 100%;
height: 200px;
background-color: green;
display: none;
}
.block-red-small {
height: 200px;
background-color: red;
display: block;
}
.block-green-small {
height: 200px;
background-color: green;
display: none;
}
.show {
display: block;
}
.hide {
display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="btn btn-red" onclick="showgreen()">Show red blocks</div>
<div class="btn btn-green" onclick="showred()">Show green blocks</div>

<p>Large blocks:</p>
<div class="container-large">
<div class="block-red"></div>
<div class="block-green"></div>
</div>

<p>Small blocks:</p>
<div class="container-small">
<div class="block-red-small"></div>
<div class="block-green-small"></div>
</div>




Answer

You receive an error because you are calling functions that don't exist:

onclick="showgreen()"

You also shouldn't use toggleClass in this case else both buttons will hide or show both colours.

You can also combine some of your event listeners together so that you only need two click()'s.

Simplified example:

$(document).ready(function() {
  $('.btn-green').click(function showred() {
    $('.block-green, .block-green-small').addClass('show').removeClass('hide');
    $('.block-red, .block-red-small').addClass('hide').removeClass('show');
  });

  $('.btn-red').click(function() {
    $('.block-red, .block-red-small').addClass('show').removeClass('hide');
    $('.block-green, .block-green-small').addClass('hide').removeClass('show');
  });

});
.container-large {
  max-width: 800px;
  height: 200px;
  margin: 10px auto 10px;
  padding: 5px;
  border: 1px solid #000;
}
.container-small {
  max-width: 200px;
  height: 200px;
  margin: 10px auto 10px;
  padding: 5px;
  border: 1px solid #000;
}
p {
  text-align: center;
}
.btn-red {
  margin-bottom: 5px;
}
.btn {
  width: 200px;
  height: 30px;
  border: 1px solid black;
  border-radius: 7px;
  font-family: sans-serif;
  color: #fff;
  text-align: center;
}
.btn-red {
  background-color: red;
}
.btn-green {
  background-color: green;
}
.block-red {
  width: 100%;
  height: 200px;
  background-color: red;
  display: block;
}
.block-green {
  width: 100%;
  height: 200px;
  background-color: green;
  display: none;
}
.block-red-small {
  height: 200px;
  background-color: red;
  display: block;
}
.block-green-small {
  height: 200px;
  background-color: green;
  display: none;
}
.show {
  display: block;
}
.hide {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="btn btn-red" >Show red blocks</div>
<div class="btn btn-green">Show green blocks</div>

<p>Large blocks:</p>
<div class="container-large">
  <div class="block-red"></div>
  <div class="block-green"></div>
</div>

<p>Small blocks:</p>
<div class="container-small">
  <div class="block-red-small"></div>
  <div class="block-green-small"></div>
</div>

Comments