Open different Divs via links

Question

Hello, I have the following SCRIPT below. It opens the DIV that is with display:None; however I will have a list of links to open new DIV’s and I don’t want to keep creating new ones to open each DIV.

How could I fix this?

HTML

<a href="javascript:;" onClick="abre();">  Abrir div 01 </a>
<a href="javascript:;" onClick="abre1();"> Abrir div 02  </a>

<div id="box" class="bg-box">
    <img src="images/capa-revista.jpg" class="responsive-img">
    <a class="" onClick="fechar();"> fechar </a>
</div>

<div id="box" class="bg-box">
    <img src="images/capa-revista.jpg" class="responsive-img">
    <a class="" onClick="fechar1();"> fechar </a>
</div>

css

.bg-box{
    display:none;
    width:100%;
    height:100%;
    background-color:rgba(3, 3, 3, 0.8) !important;
    position:fixed; z-index:999;
    top:0px;
    left:0px;
    color:#999;
    font-size:16px;
}

JS

<script>
function abre() {
    $("#box").fadeIn(700);
}
function fechar() {
    $("#box").fadeOut(700);
}

function abre1() {
    $("#box1").fadeIn(700);
}
function fechar1() {
    $("#box1").fadeOut(700);
}
</script>

Answer 1

Do so:

function abre(el) {
    $(el).fadeIn(700);
}
function fechar(el) {
    $(el).fadeOut(700);
}

And to call the function just pass the element id onClick="abre('#box');" and onClick="fecha('#box');" but Voce has to put different ids on the elements.

Answer 2

A more intuitive way is not to do several methods, just leave the logic inside the script, and keep the html elements independent, see:

<a href="javascript:void(0);" class="open-div" data-imagem="images/capa-revista1.jpg">  Abrir div 01 </a>
<a href="javascript:void(0);" class="open-div" data-imagem="images/capa-revista2.jpg">  Abrir div 02 </a>
<div id="box" class="bg-box">
    <img src="images/sem_imagem.jpg" class="responsive-img">
    <a href="javascript:void(0);" class="close-div"> fechar </a>
</div>

<script>
$(function() {
  var el = '#box';
    $(el).hide();
    $(document).on('click','.open-div', function() {
      var img = $(this).data('imagem');
         $('.responsive-img').attr('src', img);
         $(el).fadeIn(700);
    });
    $(document).on('click','.close-div', function() {
        $(el).fadeOut(700);
    });
});
</script>

If you want to cut back further:

 <a href="javascript:void(0);"  data-action="open" data-imagem="images/capa-revista1.jpg">  Abrir div 01 </a>
    <a href="javascript:void(0);" data-action="open" data-imagem="images/capa-revista2.jpg">  Abrir div 02 </a>


    <div id="box" class="bg-box">
        <img src="images/sem_imagem.jpg" class="responsive-img">
        <a href="javascript:void(0);" data-action="close"> fechar </a>
    </div>

    <script>
    $(function() {
        $('#box').hide();
        $('[data-action]').on('click',function() {
          var el = '#box';
          if ($(this).data('action') == 'open') {
          var img = $(this).data('imagem');
              $('.responsive-img').attr('src', img);
               $(el).fadeIn(700);
           } else {
               $(el).fadeOut(700);
           }
        });


    });
    </script>