1

Como puedo hacer para que cuando le den click al icono de fontawesome cambie el icono y muestre el elemento con id, si el icono es fa-arrow-left cuando el den click debe de cambiar a fa-arrow-down y mostrar el contenido con id en este caso id="primerItem", y viceversa...

Esto es lo que he intentado:

$(document).ready(function() {
    var icono1 = $( "#icono1" );
    icono1.click(function() {
      $( "#item1 p" ).toggle();
    });

    var icono2 = $( "#icono2" );
    icono2.click(function() {
      $( "#item2 p" ).toggle();
    });

    var icono3 = $( "#icono3" );
    icono3.click(function() {
      $( "#item3 p" ).toggle();
    });

    var icono4 = $( "#icono4" );
    icono4.click(function() {
      $( "#item4 p" ).toggle();
    });
});
<!DOCTYPE html>
<html>
<head>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>    
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <style>
        .content-items .sub-content {
            display: inline-block;
            width: 100%;
        }
        .content-items .item {
            display: inline;
            float: left;
            color: #fff;
            font-size: 25px;
        }

        .content-items .ico {
            display: inline;
            float: right;
            font-size: 25px;
            margin: 15px;
        }

        .content-items p {
            font-size: 20px;
            color: #000;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="content-items" style="background-color: pink;">
                    <div class="sub-content">
                        <span class="item">Item</span>
                        <span class="ico" id="icono1">
                            <i class="fa fa-arrow-left" aria-hidden="true"></i>
                        </span>
                    </div>
                    <div id="item1" style="padding-top: 20px;">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum incidunt reprehenderit placeat, animi quo perferendis magni doloremque tempore autem ut maiores, molestias vero repellat earum optio similique deleniti explicabo sint?</p>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="content-items"  style="background-color: #727aa0;">
                    <div class="sub-content">
                        <span class="item">Item</span>
                        <span class="ico" id="icono2">
                            <i class="fa fa-arrow-down" aria-hidden="true"></i>
                        </span>
                    </div>
                    <div id="item2" style="padding-top: 20px;">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, quidem quibusdam sint! Eligendi amet delectus magni molestiae eveniet unde, illo voluptas dolorum dicta distinctio, officia ullam dolore eius soluta voluptates.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="content-items" style="background-color: #bb2e46;">
                    <div class="sub-content">
                        <span class="item">Item</span>
                        <span class="ico" id="icono3">
                            <i class="fa fa-arrow-left" aria-hidden="true"></i>
                        </span>
                    </div>
                    <div id="item3" style="padding-top: 20px;">
                        <p></p>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="content-items" style="background-color: #9abb2e;">
                    <div class="sub-content">
                        <span class="item">Item</span>
                        <span class="ico" id="icono4">
                            <i class="fa fa-arrow-left" aria-hidden="true"></i>
                        </span>
                    </div>
                    <div id="item4" style="padding-top: 20px;">
                        <p></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

El resultado esperado es simple, que cuando le den clic al icono este cambie de icono y muestre el contenido.

Caso contrario: cambie icono y oculte contenido.

Update #1
Lo que esta pasando en este Update es que tengo el icono arrow-down pero no muestra el contenido hasta que haga click...

$(document).ready(function(){
  $('body').on('click', '.fa-arrow-left', function(){
    $(this).removeClass('fa-arrow-left').addClass('fa-arrow-down');
    $(this).closest('.content-items').find('.item-contenido').show();
  });
  $('body').on('click', '.fa-arrow-down', function(){
    $(this).removeClass('fa-arrow-down').addClass('fa-arrow-left');
    $(this).closest('.content-items').find('.item-contenido').hide();
  });
});
<!DOCTYPE html>
<html>
<head>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>    
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <style>
        .content-items .sub-content {
            display: inline-block;
            width: 100%;
        }
        .content-items .item {
            display: inline;
            float: left;
            color: #fff;
            font-size: 25px;
        }

        .content-items .ico {
            display: inline;
            float: right;
            font-size: 25px;
            margin: 15px;
        }

        .content-items p {
            font-size: 20px;
            color: #000;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="content-items" style="background-color: pink;">
                    <div class="sub-content">
                        <span class="item">Item</span>
                        <span class="ico" id="icono1">
                            <i class="fa fa-arrow-left" aria-hidden="true"></i>
                        </span>
                    </div>
                    <div id="item1" class="item-contenido" style="padding-top: 20px; display: none;" >
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum incidunt reprehenderit placeat, animi quo perferendis magni doloremque tempore autem ut maiores, molestias vero repellat earum optio similique deleniti explicabo sint?</p>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="content-items"  style="background-color: #727aa0;">
                    <div class="sub-content">
                        <span class="item">Item</span>
                        <span class="ico" id="icono2">
                            <i class="fa fa-arrow-down" aria-hidden="true"></i>
                        </span>
                    </div>
                    <div id="item2" class="item-contenido" style="padding-top: 20px; display: none;" >
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, quidem quibusdam sint! Eligendi amet delectus magni molestiae eveniet unde, illo voluptas dolorum dicta distinctio, officia ullam dolore eius soluta voluptates.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="content-items" style="background-color: #bb2e46;">
                    <div class="sub-content">
                        <span class="item">Item</span>
                        <span class="ico" id="icono3">
                            <i class="fa fa-arrow-left" aria-hidden="true"></i>
                        </span>
                    </div>
                    <div id="item3" class="item-contenido" style="padding-top: 20px; display: none;" >
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, quos esse quo? Neque, quaerat, exercitationem. Voluptas omnis nesciunt porro veritatis culpa quasi. Repellendus culpa corrupti, fugiat sunt quia magni consequuntur.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="content-items" style="background-color: #9abb2e;">
                    <div class="sub-content">
                        <span class="item">Item</span>
                        <span class="ico" id="icono4">
                            <i class="fa fa-arrow-left" aria-hidden="true"></i>
                        </span>
                    </div>
                    <div id="item4" class="item-contenido" style="padding-top: 20px; display: none;">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ratione quo alias fugit maiores enim odio amet, harum provident necessitatibus, error eveniet iste non voluptatibus dolore rem voluptates deleniti quos?</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

2
  • 1
    Buenas zerokira, ¿puedes explicar con ejemplos el resultado esperado ? y ¿qué has intentado y qué errores has tenido? Mira Cómo preguntar y ejemplo mínimo verificable. Un saludo
    – lois6b
    el 27 feb. 2019 a las 13:11
  • @lois6b jeje he mejorado mi pregunta, pero lo voy a tener en cuenta.
    – zerokira
    el 27 feb. 2019 a las 13:24

2 respuestas 2

1

¡Hola! Si no usas contenido cargado dinámicamente (AJAX), puedes probar lo siguiente:

Primero agrégale a todos tus items display:none y la misma clase, para usarla como referencia:

<div id="cuartoItem" class="item-contenido" style="display: none; padding-top: 20px;">
  <p></p>
</div>

Luego en Javascript:

$(document).ready(function(){
  $('.fa-arrow-left').click(function(){
    $(this).removeClass('fa-arrow-left').addClass('fa-arrow-down');
    $(this).closest('.content-items').find('.item-contenido').show();
  });
  $('.fa-arrow-down').click(function(){
    $(this).removeClass('fa-arrow-down').addClass('fa-arrow-left');
    $(this).closest('.content-items').find('.item-contenido').hide();
  });
});

En caso de que tengas contenido cargado dinámicamente, el Javascript quedaría de la siguiente forma:

$(document).ready(function(){
  $('body').on('click', '.fa-arrow-left', function(){
    $(this).removeClass('fa-arrow-left').addClass('fa-arrow-down');
    $(this).closest('.content-items').find('.item-contenido').show();
  });
  $('body').on('click', '.fa-arrow-left', function(){
    $(this).removeClass('fa-arrow-down').addClass('fa-arrow-left');
    $(this).closest('.content-items').find('.item-contenido').hide();
  });
});

Dime si tienes alguna duda, ¡Saludos!

6
  • he editado mi pregunta de lo que quiero, por favor revisala
    – zerokira
    el 27 feb. 2019 a las 13:24
  • El código que estás intentando hacer te obligará a tener un $().click por cada id que tengas, imagínate si el día de mañana tienes 30 ids, no será escalable. El código que te propongo es todo lo que necesitas para que funcione, de hecho ni siquiera necesitas los id en rigor, ya que con closest llegas al elemento que corresponde, pruébalo y dime cómo te va. el 27 feb. 2019 a las 13:29
  • en caso de que tenga el arrow-down deberia de mostrarse el contenido, puedes hacer eso?
    – zerokira
    el 27 feb. 2019 a las 13:36
  • Si, la linea $(this).closest('.content-items').find('.item-contenido').show(); es la encargada de hacer eso, ¿No te está funcionando? Esta línea lo que hace es buscar el contenedor content-items más cercano arriba en el DOM, luego desde ese punto busca el .item-contenido que corresponde y con .show() lo muestra. el 27 feb. 2019 a las 13:40
  • he colocado un update #1 editando mi pregunta para que lo mires de acuerdo a tu respuesta, no se en que esta fallando.
    – zerokira
    el 27 feb. 2019 a las 13:43
0

Ordena tu codigo en funciones sencillas, y combinalas en una lógica simple, de esta forma creas mas lineas de codigo pero resuelves el problema de forma mucho mas escalable y legible.

Básicamente necesitas una función para mostrar y cerrar un item. En caso de hacer click precisas hacer un toggle entre dos clases y mostrar o cerrar un item; y en un principio para que el contenido se muestre correctamente según la clase del icono de la flecha debes normalizar el estado de cada item:

$('.content-items .ico i').each(function(){

  var arrow = $(this);
  arrow.click(function(){ toggleItem(arrow); });  
  normalizeItem(arrow);

});

function showItem(arrow){
  arrow
    .removeClass('fa-arrow-left').addClass('fa-arrow-down')
    .closest('.content-items').find('.item-contenido').show();
}

function hideItem(arrow){
  arrow
    .removeClass('fa-arrow-down').addClass('fa-arrow-left')
    .closest('.content-items').find('.item-contenido').hide();
}

function toggleItem(arrow){
  if(arrow.hasClass('fa-arrow-left')) return showItem(arrow);    
  return hideItem(arrow);
}

function normalizeItem(arrow){
  if(arrow.hasClass('fa-arrow-left')) return hideItem(arrow);  
  return showItem(arrow);
}
<!DOCTYPE html>
<html>
<head>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>    
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <style>
        .content-items .sub-content {
            display: inline-block;
            width: 100%;
        }
        .content-items .item {
            display: inline;
            float: left;
            color: #fff;
            font-size: 25px;
        }

        .content-items .ico {
            display: inline;
            float: right;
            font-size: 25px;
            margin: 15px;
        }

        .content-items p {
            font-size: 20px;
            color: #000;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="content-items" style="background-color: pink;">
                    <div class="sub-content">
                        <span class="item">Item</span>
                        <span class="ico" id="icono1">
                            <i class="fa fa-arrow-left" aria-hidden="true"></i>
                        </span>
                    </div>
                    <div id="item1" class="item-contenido" style="padding-top: 20px; display: none;" >
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum incidunt reprehenderit placeat, animi quo perferendis magni doloremque tempore autem ut maiores, molestias vero repellat earum optio similique deleniti explicabo sint?</p>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="content-items"  style="background-color: #727aa0;">
                    <div class="sub-content">
                        <span class="item">Item</span>
                        <span class="ico" id="icono2">
                            <i class="fa fa-arrow-down" aria-hidden="true"></i>
                        </span>
                    </div>
                    <div id="item2" class="item-contenido" style="padding-top: 20px; display: none;" >
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, quidem quibusdam sint! Eligendi amet delectus magni molestiae eveniet unde, illo voluptas dolorum dicta distinctio, officia ullam dolore eius soluta voluptates.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="content-items" style="background-color: #bb2e46;">
                    <div class="sub-content">
                        <span class="item">Item</span>
                        <span class="ico" id="icono3">
                            <i class="fa fa-arrow-left" aria-hidden="true"></i>
                        </span>
                    </div>
                    <div id="item3" class="item-contenido" style="padding-top: 20px; display: none;" >
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, quos esse quo? Neque, quaerat, exercitationem. Voluptas omnis nesciunt porro veritatis culpa quasi. Repellendus culpa corrupti, fugiat sunt quia magni consequuntur.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="content-items" style="background-color: #9abb2e;">
                    <div class="sub-content">
                        <span class="item">Item</span>
                        <span class="ico" id="icono4">
                            <i class="fa fa-arrow-left" aria-hidden="true"></i>
                        </span>
                    </div>
                    <div id="item4" class="item-contenido" style="padding-top: 20px; display: none;">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ratione quo alias fugit maiores enim odio amet, harum provident necessitatibus, error eveniet iste non voluptatibus dolore rem voluptates deleniti quos?</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

De esta forma no solo tienes un funcionamiento limpio, tienes funciones reutilizables y faciles de mantener por si tu aplicación crece y necesitas combinar funcionalidades para operar con los desplegables.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.