Tengo el siguiente código HTML.

    <input type="button" id="B1" onclick="return false;" value="Show" />
    <input type="button" id="B2" onclick="return false;" value="Show" />
    <input type="button" id="B3" onclick="return false;" value="Show" />
    <input type="button" id="B4" onclick="return false;" value="Show" />

   <p id="P1">This is a paragraph with little content.</p>
   <p id="P2">This is another small paragraph.</p>
   <p id="P3">This is a paragraph with little content.</p>
   <p id="P4">This is another small paragraph.</p>

Me gustaría una función jQUERY para hacer lo siguiente. Si hago clic en el botón B1, debería mostrar el texto P1 y también el texto del botón B1 debería cambiar a Ocultar y la próxima vez que haga clic en el botón B1 debería ocultar el texto P1 y cambiar el texto del botón B1 para mostrar. Lo mismo para B2 P1, B3 P3, B4 P4.

-4
user3202862 5 sep. 2014 a las 15:47

3 respuestas

La mejor respuesta

Pruebe esto: use jQuery Start With Selector y el evento de clic de enlace para todos los botones que tienen ID comienza con 'B' y muestra / oculta el párrafo respectivo.

 $(function(){
  //hide all paragraph
  $('p[id^=P]').hide();
  $('input[id^=B]').click(function(){
     var index = $(this).attr('id').replace('B','');
     var lable = $(this).val()=="Show"?"Hide":"Show";
     $(this).val(lable);
     if(lable=="Show")
      $('#P'+index).hide();
     else
      $('#P'+index).show();
  });
});

Demo JSFiddle

1
Bhushan Kawadkar 5 sep. 2014 a las 12:24

¡Esto funciona bien! para mí, puedes usar el siguiente código.

  • Javascript

`

<script src="js8/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#P1").hide();
        $("#P2").hide();
        $("#P3").hide();
        $("#P4").hide();
        $('input[id^=B]').click(function () {
            var index = $(this).attr('id').replace('B', '');
            if ($(this).val() == "Show") {
                $('#P' + index).show();
                $(this).val("Hide")
            }
            else {
                $('#P' + index).hide();
                $(this).val("Show")
            }


        });
    });

</script>
1
prog1011 5 sep. 2014 a las 12:09

Puede usar la función slideToggle y la función : selector visible para saber si el div está abierto o no:

<input type="button" id="B1" onclick="$('#P1').slideToggle();" value="Show" />

Después, te dejo escribir la función;)

1
Adriien M 5 sep. 2014 a las 11:50