How to change display:block to display:none using only SCSS?

Question

I have navigation with a mega menu. If I click on "option 1", I need to set display: block on list-1. If I click on "option 2", I need to set display: none on list-1 and display: block on list-2.

Here is an example of the megamenu:

<div>
    <ul>
       <li class="option-1"><a>option 1</a></li>
       <li class="option-2"><a>option 2</a></li>
    </ul>

    <ul class="list-1">
       <li>option</li>
       <li>option</li>
    </ul>

    <ul class="list-2">
       <li>option</li>
       <li>option</li>
    </ul>
</div>

Does anyone know how to do this using only SCSS or CSS?

Answer 1

Alternative is to use JS or jQuery like below:

$('.list').hide();
$('.button-1').click(function() {
   $('.list').hide();
   $('.list-1').toggle();
});
$('.button-2').click(function() {
  $('.list').hide();
   $('.list-2').toggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="button-1">1</button>
<button class="button-2">2</button>


    <ul class="list-1 list">
       <li>option1</li>
       <li>option1</li>
    </ul>

    <ul class="list-2 list">
       <li>option2</li>
       <li>option2</li>
    </ul>
</div>