jQuery uses hide() and toggle() functions to realize the camera brand display hiding function

jQuery uses hide() and toggle() functions to realize the camera brand display hiding function

Recently, when I was learning jQuery, I came across the show(), hide(), and toggle() functions. So I used these functions to practice a case of showing and hiding elements:

Tip: The small icons for switching the buttons up and down in the code can be obtained from the brand display function image in this link

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Use hide() and toggle() functions to display camera brands</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    body {
      font-size: 12px;
      text-align: center;
    }

    a {
      color: #04D;
      text-decoration: none;
    }

    a:hover {
      color: #F50;
      /*The text-decoration attribute specifies the decoration added to the text, such as underline, overline, strikethrough, etc. */
      text-decoration: underline;
    }

    .SubCategoryBox {
      width: 600px;
      margin: 0 auto;
      text-align: center;
      margin-top: 40px;
    }

    .SubCategoryBox ul {
      list-style: none;
    }

    .SubCategoryBox ul li {
      display: block;
      float: left;
      width: 200px;
      line-height: 20px;
    }

    .showmore, .showless {
      clear: both;
      text-align: center;
      padding-top: 10px;
    }

    .showmore a, .showless a {
      display: block;
      width: 120px;
      margin: 0 auto;
      line-height: 24px;
      border: 1px solid #AAA;
    }

    .showmore a span {
      padding-left: 15px;
      /*The last two digits are offset from the upper left corner (0,0). The first digit is the offset on the X-axis, that is, the horizontal offset. Positive means right, negative means left!
       The second number is the offset on the Y axis, that is, the horizontal offset, positive means downward, negative means upward!*/;
      background: url(img/down.gif) no-repeat 0 3px;
    }

    .showless a span {
      padding-left: 15px;
      background: url(img/up.gif) no-repeat 0 3px;
    }

    .promoted a {
      color: #F50;
    }
  </style>
  <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script type="text/javascript">
    $(function () {
      //After the page is loaded, hide some camera brands first $("ul li:gt(5):not(:last)").hide();
      // The filter function filters out the set of elements that match the specified expression. This method is used to narrow the matching range. Use commas to separate multiple expressions // Here we filter out the camera brands that need to be styled separately var multiPromoted = $("li").filter(":contains('Canon'),:contains('Sony'),:contains('Kodak')");
      // Get the a tag binding click event $("div div a").click(function () {
        // Switch between showing and hiding some camera brands$("ul li:gt(5):not(:last)").toggle();
        // Replace text content, superscript images, and remove the text style of the a tag under li when hiding some camera brands if ($("ul li:gt(5):not(:last)").is(":hidden")) {
          $("a > span").html("Show all brands");
          $("div div").removeClass();
          $("div div").addClass("showmore");
          $(multiPromoted).removeClass("promoted");
        } else {
          // When displaying some camera brands, replace the text content, superscript image, and add the a tag text style under li$("a > span").html("Display simplified brands");
          $("div div").removeClass();
          $("div div").addClass("showless");
          $(multiPromoted).addClass("promoted");
        }
      });
    });
  </script>
</head>
<body>
<div class="SubCategoryBox">
  <ul>
    <li><a href="#">Canon</a><i>(30440) </i></li>
    <li><a href="#">Sony</a><i>(27220) </i></li>
    <li><a href="#">Samsung</a><i>(20808) </i></li>
    <li><a href="#">Nikon</a><i>(17821) </i></li>
    <li><a href="#">Panasonic</a><i>(12289) </i></li>
    <li><a href="#">Casio</a><i>(8242) </i></li>
    <li><a href="#">Fuji</a><i>(14894) </i></li>
    <li><a href="#">Kodak</a><i>(9520) </i></li>
    <li><a href="#">Pentax</a><i>(2195) </i></li>
    <li><a href="#">Ricoh</a><i>(4114) </i></li>
    <li><a href="#">Olympus</a><i>(12205) </i></li>
    <li><a href="#">BenQ</a><i>(1466) </i></li>
    <li><a href="#">Patriot</a><i>(3091) </i></li>
    <li><a href="#">Other Brand Cameras</a><i>(7275) </i></li>

  </ul>
  <div class="showmore">
    <a href="#"><span>Show all brands</span></a>
  </div>
</div>
</body>
</html>

Code running effect:

Function display effect:

This is the end of this article about how jQuery uses hide() and toggle() functions to display and hide camera brands. For more information about how jQuery uses hide() and toggle() functions to display and hide camera brands, please search previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Example to explain the usage of hide, show, and toggle in Jquery
  • jQuery toggle alternative
  • jQuery click to change class and toggle and toggleClass() method definition and usage
  • jQuery uses the toggleClass method to dynamically add and delete Class styles
  • A guide to using the hover and toggle methods in jQuery
  • Examples of using show(), hide() and toggle() in jQuery

<<:  A complete record of a Mysql deadlock troubleshooting process

>>:  How to create and run a Django project in Ubuntu 16.04 under Python 3

Recommend

MySQL Optimization Summary - Total Number of Query Entries

1. COUNT(*) and COUNT(COL) COUNT(*) usually perfo...

Workerman writes the example code of mysql connection pool

First of all, you need to understand why you use ...

Detailed steps to build an independent mail server on Centos7.9

Table of contents Preface 1. Configure intranet D...

A detailed introduction to the netstat command in Linux

Table of contents 1. Introduction 2. Output Infor...

Sample code of uniapp vue and nvue carousel components

The vue part is as follows: <template> <...

Problem analysis of using idea to build springboot initializer server

Problem Description Recently, when I was building...

How to use react-color to implement the front-end color picker

background We can use react-color to implement th...

Summary of accurate calculations of various distances/scroll distances in a window

Usually in project development, we have to deal wi...

Detailed analysis of the chmod command to modify file permissions under Linux

Use the Linux chmod command to control who can ac...

Detailed explanation of nginx upstream configuration and function

Configuration Example upstream backend { server b...

Make your text dance with the marquee attribute in HTML

Syntax: <marquee> …</marquee> Using th...

Web page CSS priority is explained in detail for you

Before talking about CSS priority, we need to und...

MySQL table addition, deletion, modification and query basic tutorial

1. Create insert into [table name] (field1, field...

How to configure Nginx load balancing

Table of contents Nginx load balancing configurat...

Docker builds cluster MongoDB implementation steps

Preface Due to the needs of the company's bus...