Open different DIVs through links

Question

Open different DIVs through links

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

Hello, I have the following SCRIPT below. It opens the DIV that is with display: none; but I will have a list of links to open new DIV's and I do not want to be creating new functions to open each DIV.

How could I solve 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>

javascript html jquery css

asked by anonymous 24.03.2016 / 20:08

2 answers

0

Do this:


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

And to call the function just pass the id of the element onClick="abre('#box');" and onClick="fecha('#box');" but you have to put different ids in the elements.

24.03.2016 / 20:23

Selenium c # - API Mass testing Why does not my code exclude mysql / php database? [closed]

score 0 · Accepted Answer

A more intuitive way is to not do multiple 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 further reduce:

 <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>