item exists on page

var viewh2 = $(".block_peptides:last-child .block-item .title_view h2")

he has a margin-bottom=10px

it is necessary to open the list when clicked and make margin-bottom = 40px

when you click again - the list is closed and you need to make margin-bottom back 10px

At first I did this:

  ` $(".title_view h2").click(function() { $(this).toggleClass("on"); $(this).parent().parent().find(".block_content").slideToggle(300); viewh2.css("margin-bottom", "40px"); return false; });`

The list opens Margin = 40px But it closes and Margin remains 40px. I wanted to solve the problem like this:

  if ($(".block_content").is(":hidden")){ viewh2.css("margin-bottom", "10px"); }else if ($(".block_content").is(":visible")) { viewh2.css("margin-bottom", "40px"); }

does not help ... Tell me how to properly do?

    1 answer 1

    In css create two classes:

     .active { margin-bottom: 40px; } .hidden { margin-bottom: 10px; }

    In html, assign the class to hidden and in js switch classes. This code must be inserted into onclick handler:

     viewh2.toggleClass('active'); viewh2.toggleClass('hidden');
    • one
      viewh2.toggleClass('active hidden'); - Igor
    • I am forced to disagree because at some point both classes will be deactivated - Eliot Alderson
    • Eliot Alderson, yes, thanks so it works, although the interest isn’t lost how to do it properly on pure js) - Sergey Chugun