How to change the visibility of div tags which are accessed with class?

Good morning,

i want to improve the userexperience. So i want to slide out content if the User clicks on the arrow and the surrounding box of the arrow. But at the moment the user just can click on the Arrow but not on the box.

The Html looks like this:

    <div class="ALL">
       <img src="~/Images/ic_keyboard_arrow_up_black_24dp.png" alt="Arrow" id="Arrow_up" style= "display: block; margin-left: auto; margin-right: auto" />
       <img src="~/Images/ic_keyboard_arrow_down_black_24dp.png" alt="Arrow" id="Arrow_down" style= "display: block; margin-left: auto; margin-right: auto" /> 

       <div id="Part_of_ALL">
        @Html.Partial("_PartialView", Model)
       </div>

    </div>

The old javascript where the user just can click on the arrows to pull the box up or down:

  $(document).ready(function () {
  $('#Arrow_down').hide();
  $('#Arrow_up').show();
  $('#escalation_model').hide();

  $('#Arrow_up').click(function () {    //change here to .ALL
      $(".ALL").switchClass("ALL", "ALL_open",0);
      $('#Arrow_up').hide();
      $('#Arrow_down').show();
      $('#Part_of_ALL').show();            
  });

  $('#Arrow_down').click(function () {    //change here to .ALL_open
      $(".ALL_open").switchClass("ALL_open", "ALL", 0);
      $('#Arrow_up').show();
      $('#Arrow_down').hide();
      $('#Part_of_ALL').hide();

  });
 });

So, now i thought to achieve my goal i just have to change the activation of the click function of the id="Arrow_down/up" to my class ALL and ALL_open, but that wont work. It can open the box, but dont react on my closing actions. I also tried it with toggle all things, because its a shorter javascript but that didnt work either. What am i doing wrong? Thank you for your help.

Answers 1

  • You can use toggle() like

    $(document).ready(function() {
      $('#Arrow_down, #Part_of_ALL').hide();
      $('#Arrow_up').show();
      $('#escalation_model').hide();
    
      $('.ALL').click(function() { //change here to .ALL
        $(this).switchClass("ALL", "ALL_open", 0);
        $('#Arrow_up, #Arrow_down, #Part_of_ALL').toggle();
      });
    });
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css" rel="stylesheet" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
    <div class="ALL">
      <img src="//placehold.it/64?text=UP" alt="Arrow" id="Arrow_up" style="display: block; margin-left: auto; margin-right: auto" />
      <img src="//placehold.it/64?text=DOWN" alt="Arrow" id="Arrow_down" style="display: block; margin-left: auto; margin-right: auto" />
    
      <div id="Part_of_ALL">
        @Html.Partial("_PartialView", Model)
      </div>
    
    </div>


Related Articles