javascript - show/hide div if opened by radio selection

Question

I have the .menu-btn successfully toggling the .menu, but:

• Step 1: If a radio is selected, the .slides div should open,
• Step 2: If the .menu-btn is pressed when the .slides div is open, the .slides container should close.

Each .slide shows/hides with the radio selection using the code below, but I need to be able to animate the .slides container to follow the steps above.

$(function() {
  $("[name=toggler]").click(function() {
    $(".slide").hide();
    $("#blk-" + $(this).val()).show();
  });

$(".menu-btn").click(function() {
  $(".menu").animate({
    width: 'toggle',
    ease: 'easeOutExpo'
  }, 250);
});
$(function() {
  $("[name=toggler]").click(function() {
    $(".slide").hide();
    $("#blk-" + $(this).val()).show();
  });
});

.menu,
.slide {
  display: none;
}

.flex,
.btn-wrap {
  display: flex;
}

.menu {
  height: 50px;
}

.btn,
.menu-btn {
  padding: 20px;
  border: 1px solid silver;
  cursor: pointer
}

.slides {
  border: 2px solid green;
}

.slide {
  height: 50px;
  width: 50px;
  border: 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex">
  <a href="#" class="menu-btn">Menu</a>
  <div class="menu">
    <div class="btn-wrap">
      <label class="btn"><input type="radio" name="toggler" value="1"/>Slide 1</label>
      <label class="btn"><input type="radio" name="toggler" value="2"/>Slide 2</label>
    </div>
  </div>
</div>
<div class="slides">
  <div class="slide" id="blk-1">
    Slide 1
  </div>
  <div class="slide" id="blk-2">
    Slide 2
  </div>
</div>

Answer 1

You might have to save your actions in an variables/object.

Check here: https://codepen.io/johnsackson/pen/RyGdRp

var slideDetail = {
  isRadioGroupOpen: false,
  isSlideOpen: false,
  value: ""
};

$(".menu-btn").click(function() {
  $(".menu").toggle("slide");
  if(slideDetail.isRadioGroupOpen) {
    $(".slide").hide();
  } else if(slideDetail.value!=="") {
    $(slideDetail.value).show();
  }
  slideDetail.isRadioGroupOpen = !slideDetail.isRadioGroupOpen
});

$(function() {
  $("[name=toggler]").click(function() {
    $(".slide").hide();
    var value = "#blk-" + $(this).val();
    $(value).show();
    slideDetail.isSlideOpen = !slideDetail.isSlideOpen;
    slideDetail.value = value;
  });
});

I hope this is what you are looking for.