Home / Questions / 241438
Accepted
zerokira
Asked: 2020-02-28 05:06:01 +0800 CST 2020-02-28 05:06:01 +0800 CST

Show / Hide in items with Jquery

  • 772

How can I make it so that when the fontawesome icon is clicked , the icon changes and shows the element with id , if the icon is when the click is given, it must change to and show the content with id in this case , and vice versa... This is what I have tried:fa-arrow-leftfa-arrow-downid="primerItem"

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

The expected result is simple, that when the icon is clicked it changes its icon and shows the content.

Otherwise : change icon and hide content.

Update #1
What is happening in this Update is that I have the icon arrow-downbut it doesn't show the content until I 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>

javascript

2 Answers

  1. Best Answer

    Hello! If you don't use dynamically loaded (AJAX) content, you can try the following:

    First add to all your items display:none and the same class, to use as a reference:

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

    Then in 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();
  });
});

    In case you have dynamically loaded content, the Javascript would look like this:

    $(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();
  });
});

    Tell me if you have any questions, Greetings!

    • 1

  2. Order your code in simple functions, and combine them in a simple logic, in this way you create more lines of code but solve the problem in a much more scalable and readable way.

    Basically you need a function to display and close an item. In case of clicking you need to toggle between two classes and show or close an item; and initially, so that the content is displayed correctly according to the class of the arrow icon, you must normalize the state of each 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>

    In this way you not only have a clean operation, you have reusable and easy to maintain functions in case your application grows and you need to combine functionalities to operate with the dropdowns.

    • 0