Display a div when clicking on an image

Question

Display a div when clicking on an image

Navigation

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

0

Good try to make a drop-down and I'm hitting quite a few hits with it. I've written this code JQuery , but it does not work, (which is not surprising because it's the first one made by me xD).

$(document).ready(function() {

  // 1) Inicialmente ocultamos la flecha de contraer acordeón. Inicialmente está contraido.
  $("#arrow-up").css("display", "none");

  // 2) Inicialmente acordeón contraido, (altura=0)
  $(".Marca_General_Acordeon").css("height", "0px");

  // Si se presiona la flecha hacia abajo (=desplegar)
  if ($("arrow-down").click) {

    //Ocultamos esta, mostramos la contraria y le damos altura a Marca_General_Acordeon
    $(".Marca_General_Acordeon").css("height", "500px");
    $("#arrow-down").css("display", "none");
    $("#arrow-up").css("display", "block");
  }

  // Por el contrario, si está despelgado (= la flecha visible es arrow-up)
  else {

    //Ocultamos esta, mostramos la contraria y le damos altura a Marca_General_Acordeon
    $(".Marca_General_Acordeon").css("height", "0px");
    $("#arrow-up").css("display", "none");
    $("#arrow-down").css("display", "block");
  }

});

.Marca_General_Acordeon {
  height: 0px;
  width: 1100px;
  background-color: orange;
  margin: auto;
}

.Marca_Flechas_Acordeon_General {
  width: 1100px;
  /* Molaria saber como centrar el interior y que esta media fuese % */
  background-color: red;
  margin: auto;
  text-align: center;
}

.Flechas_Acordeon {
  height: 20px;
  width: 20px;
  display: block;
  margin: auto;
  cursor: pointer;
}

<!DOCTYPE html>


<HTML lang="es">

<HEAD>
  <meta charset="utf-8">

  <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</HEAD>

<BODY>

  <div class="Marca_General_Acordeon">

    <div class="Marca_Individual">
      <img src="Img/Iconos/AlfaRomeo100px.png" alt="">
    </div>

    <div class="Marca_Individual">
      <img src="Img/Iconos/Alpine100px.png" alt="">
    </div>

    <div class="Marca_Individual">
      <img src="Img/Iconos/AstonMartin100px.png" alt="">
    </div>

    <div class="Marca_Individual">
      <img src="Img/Iconos/AlfaRomeo100px.png" alt="">
    </div>

    <div class="Marca_Individual">
      <img src="Img/Iconos/AlfaRomeo100px.png" alt="">
    </div>

    <div class="Marca_Individual">
      <img src="Img/Iconos/AlfaRomeo100px.png" alt="">
    </div>

    <div class="Marca_Individual">
      <img src="Img/Iconos/AlfaRomeo100px.png" alt="">
    </div>

    <div class="Marca_Individual">
      <img src="Img/Iconos/AlfaRomeo100px.png" alt="">
    </div>

    <div class="Marca_Individual">
      <img src="Img/Iconos/AlfaRomeo100px.png" alt="">
    </div>

    <div class="Marca_Individual">
      <img src="Img/Iconos/AlfaRomeo100px.png" alt="">
    </div>

  </div>

  <div class="Marca_Flechas_Acordeon_General">

    <img src="Img/Iconos/AA_FlechaCirculo_Arriba.png" id="arrow-up" class="Flechas_Acordeon" />
    <img src="Img/Iconos/AA_FlechaCirculo_Abajo.png" id="arrow-down" class="Flechas_Acordeon" />

  </div>


  <!-- Llamada a JavaScript -->
  <script type="text/javascript" src="JS/Motor.js"></script>

</BODY>

</HTML>

The comments you see, is exactly what I want you to do. That is,

Since I have two arrows, (up and down), initially I just want to see the one pointing down, since the drop-down is initially picked up.

For the same reason I define that the height of the drop-down is 0.

If you press an arrow, you have to:

a) Hide this.

b) Make the opposite appear.

c) It has to give a height of 0px or 500px depending on whether it is being deployed (felcha has been pushed down) or picking up (arrow has been pushed upwards).

I have seen that there is the .slideToggle that could perhaps be used to replace the issue of setting heights.

Greetings and do not kill me if there are many failures. Could it be that the mistake is that I take the wrong click on the arrow? (This is an image, I say in case it had any impact)

jquery

asked by NEA 03.09.2017 в 19:44

source

3 answers

1

Maybe something like that will help you. You capture a single click event, in which the two arrows are. According to the class that contains determinas if it is closed or open and act accordingly. You can add animation effects to show and hide to make it more visual.

$(document).ready(function() {

  $('.arrows').click(function(){
     if ($(this).hasClass('a-closed')) {
        $(this).removeClass('a-closed');
        $(this).addClass('a-opened');
        $(".Marca_General_Acordeon").show();
        $("#arrow-down").hide();
        $("#arrow-up").show();
     } else {
        $(this).addClass('a-closed');
        $(this).removeClass('a-opened');
        $(".Marca_General_Acordeon").hide();
        $("#arrow-down").show();
        $("#arrow-up").hide();
     }
  });

});

.Marca_General_Acordeon {
  display: none;
  height: 500px;
  width: 1100px;
  background-color: orange;
  margin: auto;
}

.Marca_Flechas_Acordeon_General {
  width: 1100px;
  /* Molaria saber como centrar el interior y que esta media fuese % */
  background-color: red;
  margin: auto;
  text-align: center;
}

.Flechas_Acordeon {
  height: 20px;
  width: 20px;
  display: block;
  margin: auto;
  cursor: pointer;
}

#arrow-down {
  display: none;
}

<!DOCTYPE html>


<HTML lang="es">

<HEAD>
  <meta charset="utf-8">

  <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</HEAD>

<BODY>

  <div class="Marca_General_Acordeon">

    <div class="Marca_Individual">
      <img src="Img/Iconos/AlfaRomeo100px.png" alt="">
    </div>

    <div class="Marca_Individual">
      <img src="Img/Iconos/Alpine100px.png" alt="">
    </div>

    <div class="Marca_Individual">
      <img src="Img/Iconos/AstonMartin100px.png" alt="">
    </div>

    <div class="Marca_Individual">
      <img src="Img/Iconos/AlfaRomeo100px.png" alt="">
    </div>

    <div class="Marca_Individual">
      <img src="Img/Iconos/AlfaRomeo100px.png" alt="">
    </div>

    <div class="Marca_Individual">
      <img src="Img/Iconos/AlfaRomeo100px.png" alt="">
    </div>

    <div class="Marca_Individual">
      <img src="Img/Iconos/AlfaRomeo100px.png" alt="">
    </div>

    <div class="Marca_Individual">
      <img src="Img/Iconos/AlfaRomeo100px.png" alt="">
    </div>

    <div class="Marca_Individual">
      <img src="Img/Iconos/AlfaRomeo100px.png" alt="">
    </div>

    <div class="Marca_Individual">
      <img src="Img/Iconos/AlfaRomeo100px.png" alt="">
    </div>

  </div>

  <div class="Marca_Flechas_Acordeon_General">
    <div class="arrows a-closed">
      <img src="Img/Iconos/AA_FlechaCirculo_Arriba.png" id="arrow-up" class="Flechas_Acordeon" />
      <img src="Img/Iconos/AA_FlechaCirculo_Abajo.png" id="arrow-down" class="Flechas_Acordeon" />
   </div>
  </div>


  <!-- Llamada a JavaScript -->
  <script type="text/javascript" src="JS/Motor.js"></script>

</BODY>

</HTML>

answered by 03.09.2017 в 20:36

0

$(document).ready(function(){

var $btns = $('.btn');
var $imagen = $('#imagen');

$btns.click(function(e) {
  var id = this.id=="up";
 
    $(this).siblings().show();
    $(this).hide();
    
    $imagen.css('padding-top', 
      id ? '0em' : '5em'
    );
});
});

#imagen{
 position: realtive;
 background-color: darkmagenta;
 padding: 4em;
}

.buttons{
  position: absolute;
  top: 0.5em;
  right: 0.5em;
}

#down {
  display: none;
}

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</head>
<body>

<div id="imagen">
 <span class="buttons">
  <span class="btn" id="up">
    &#x25B2;
  </span>
  <span class="btn" id="down">
    &#x25BC;
  </span>
 </span>
</div>
</body>
</html>

answered by 03.09.2017 в 20:18

Format date GMT Madrid PHP How to load my DatePickerDialog in Android 24-hour format?

score 2 · Accepted Answer

Replaced by the events click of each button:

// Si se presiona la flecha hacia abajo (=desplegar)
$("#arrow-down").click(function(){
    //Ocultamos esta, mostramos la contraria y le damos altura a Marca_General_Acordeon
    $(".Marca_General_Acordeon").css("height","500px");
    $("#arrow-down").css("display","none");
    $("#arrow-up").css("display","block");

// Por el contrario, si está despelgado (= la flecha visible es arrow-up)
$("#arrow-up").click(function(){
    //Ocultamos esta, mostramos la contraria y le damos altura a Marca_General_Acordeon
    $(".Marca_General_Acordeon").css("height","0px");
    $("#arrow-up").css("display","none");
    $("#arrow-down").css("display","block");
});

with slideToogle :

.Marca_General_Acordeon {
    height: 500px;
    width: 1100px;
    background-color: orange;
    margin: auto;
}

$(document).ready(function(){

    // 1) Iniciialmente ocultamos la flecha de contraer acordeón. Inicialmente está contraido.
    $("#arrow-up").css("display","none");

    // 2) Inicialmente acordeón contraido, 
    $( ".Marca_General_Acordeon" ).slideToggle( "slow" );

    // Si se presiona la flecha hacia abajo (=desplegar)
    $("#arrow-down").click(function(){
        //Ocultamos esta, mostramos la contraria y le damos altura a Marca_General_Acordeon
        $( ".Marca_General_Acordeon" ).slideToggle( "slow" );
        $("#arrow-down").css("display","none");
        $("#arrow-up").css("display","block");
    });

    // Por el contrario, si está despelgado (= la flecha visible es arrow-up)
    $("#arrow-up").click(function(){
        //Ocultamos esta, mostramos la contraria y le damos altura a Marca_General_Acordeon
        $( ".Marca_General_Acordeon" ).slideToggle( "slow" );
        $("#arrow-up").css("display","none");
        $("#arrow-down").css("display","block");
    });

    });