Change an element's background if another is visble

Change an element's background if another is visble

I have multiples of ".container" and They're all shown one at a time. I'm trying to get the backgroundof the parent DIV to change depending on the visible ".container" . but it doesn't work. Any ideas on how this can be achieved?


HTML

  1. <div id="main">
  2. <div class="prev">Previous</div>
  3. <div class="next">Next</div>
  4. <div class="container active">One</div>
  5. <div class="container">Two</div>
  6. <div class="container">Three</div>
  7. <div class="container">Four</div>

  9. </div>
CSS
  1. .prev, .next {
  2. float: left;
  3. color:blue;
  4. font-size: 24px;
  5. margin: 10px 0 50px 50px;
  6. cursor:pointer;
  7. width: 40%;
  8. color: black;
  9. }
  10. .container {
  11. width: 100%;
  12. font-size: 70px;
  13. margin-bottom: 20px;

  15. }
  16. .container {
  17. display: none;
  18. }
  19. .container.active {
  20. display: inherit;
  21. }


jQuery
  1. $(".prev").on("click", function(){
  2. $(".container.active").removeClass("active").prev().addClass("active");
  3. var $prev = $('.container.active').removeClass('active');
  4. if ($prev.length) {
  5. $prev.addClass('active');
  6. }
  7. else {
  8. $(".container:last").addClass('active');
  9. }

  11. });
  12. $(".next").on("click", function(){
  13. $(".container.active").removeClass("active").next().addClass("active");
  14. var $next = $('.container.active').removeClass('active');
  15. if ($next.length) {
  16. $next.addClass('active');
  17. }
  18. else {
  19. $(".container:first").addClass('active');
  20. }


  23. });
  24. jQuery(document).ready(function(){
  25. if ($('.container:nth-of-type(2)').is(':visible')) {
  26. $('#main').css({'background' : 'red'});
  27. }
  28. else {}
  29. });


Here's a jsFiddle link