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

Common properties of frameset (dividing frames and windows)

A frame is a web page screen divided into several ...

Detailed instructions for installing mysql5.7 database under centos7.2

The mysql on the server is installed with version...

The normal method of MySQL deadlock check processing

Normally, when a deadlock occurs, the connection ...

Learn more about the most commonly used JavaScript events

Table of contents JavaScript events: Commonly use...

MySQL database query performance optimization strategy

Optimize queries Use the Explain statement to ana...

Linux CentOS6.9 installation graphic tutorial under VMware

As a technical novice, I am recording the process...

A brief discussion on common operations of MySQL in cmd and python

Environment configuration 1: Install MySQL and ad...

Use CSS to implement special logos or graphics

1. Introduction Since pictures take up a lot of s...

MySQL query optimization using custom variables

Table of contents Optimizing sorting queries Avoi...

Sample code for implementing Google third-party login in Vue

Table of contents 1. Developer Platform Configura...

How to customize an EventEmitter in node.js

Table of contents Preface 1. What is 2. How to us...

jQuery realizes image highlighting

It is very common to highlight images on a page. ...

Detailed explanation of Bind mounts for Docker data storage

Before reading this article, I hope you have a pr...

Mysql online recovery of undo table space actual combat record

1 Mysql5.6 1.1 Related parameters MySQL 5.6 adds ...

Split and merge tables in HTML (colspan, rowspan)

The code demonstrates horizontal merging: <!DO...