example : Default div hide , It appears when you click the button , Hide when clicking again .

<a href="#" onclick="f('ycbc')"; > Control buttons </a> 
<div id="ycbc" style="display:none"> Hidden content </div>

Solution 1 :javascript

utilize onclick Event call f('ycbc') function , Parameters are hidden contents div Of id, Appears when the function is added to the button , Hide the code when you click again , as follows :

function f(a){
var obj = document.getElementById(a);
if(obj.style.display==""){
obj.style.display = "none";
}else{
obj.style.display = "";
}
}

Be careful : Hidden content div To add style="display:none"


a Labeled KENG——a Labeled href="#" Be sure to add. #, otherwise , Click to refresh this page . The effect of joining cannot come out .


Solution 2 :jquery

<script src="../js/jquery.min.js"></script>

Be careful : Use jquery Remember to introduce jquery.js

<a href="#" " id="butonclick"> Click button </a>
<div id="ycxg" style="display: none;"> Hidden content </div>

principle : lookup id#butonclick call onclick event , Judge the hidden content of id="ycxg" Of CSS style , When display=none, The hidden content of id="ycxg" Of CSS style display=block, otherwise display=none;

$(document).ready(function() {
$('#butonclick').click(function(){
if($("#ycxg").css('display')=='none'){
$("#ycxg").css("display","block");
}else{
$("#ycxg").css("display","none");
}
})
});

Or use jquery Show hidden effects

$(document).ready(function() {
$('#butonclick').click(function(){
$("#ycxg").toggle();
})
});

Expand :

$("#hide").click(function(){
$("p").hide(); // hide
}); $("#show").click(function(){
$("p").show(); // Show
});

common problem 1: Default div hide , It appears when you click the button , Hide when clicking again . More articles about

  1. jquery Click add style , Then click to get the style

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. radio Click to select , Click again to restore unselected state

    radio Click to select , Click again to restore unselected state Realization way 1: <input   type="radio"   id="cat"   name="ca ...

  3. js timer , Click start time , Then click stop

    Click the countdown to start , Click stop , Click again to start again , A little more stop ... <i id=</i> second <em onclick="timeOpen();"> Start </e ...

  4. Android:GridView Click in Item Color change , Then click restore .

    Use GridView I want to click on one of them Item, The Item Change the background , Click again on the Item Back in the background , I searched a lot of information on the Internet, but I didn't see any similar cases , But it's still inspiring , Now let's share my experience . First , First of all to GridV ...

  5. Original voice js, Cancel event bubbles , Click button , Show box, Click on the rest of the screen ,box hide

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. js Click the picture to enlarge , Then click reduce to restore

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. vue Loop multiple tags , Click on the label to change color , Click Cancel again , You can click multiple at the same time

    effect : <div class="relFacilityTitcon"> <i v-for="(item,index) in facilityList&q ...

  8. pure Div+Css Beautiful click button and close button

    pure Div+Css Beautiful click button and close button , Clicking on a button also works . These are not pictures .

  9. js Building functions , Click the button to display div, Then click the button or other area , hide div

    This is just an example , First look at the effect : html Code : <nav> <span class="nav_logo"></span> <h1> Yunma ...

Random recommendation

  1. Android Coding standards 01

    The goal is : master Java & Android Naming specification Research on Android Source code based on improved naming conventions Assessment content Name four common nomenclature Compare java and C# The differences in the naming conventions of summary : Read from different programmers ...

  2. eclipse sdk Cannot update

    Recently, the motherland has become stronger and stronger , Strong enough android Development tools can't be updated , But no matter how strong the motherland is, it can't stop my development . Let's share an update android sdk Methods . The principle of the method is to use domestic mirror source . Tools / raw material Computer one ...

  3. Asp.Net Three pagination methods in

    Asp.Net Three pagination methods in Usually there are 3 Methods , Namely asp.net Its own data display space, such as GridView And so on , Third party paging controls such as aspnetpager, Stored procedure paging, etc . The first one is : Use Grid ...

  4. mac qq When the screenshot function fails , How to restart the screenshot function ?

    stay finder Open the application directory in , find QQ, Right click QQ, Select Show package content , A folder opens . Go to the following path Library/LoginItems Then double click. ScreenCapture This process , The screenshot function is ...

  5. Netty4.0.24.Final In the version IdleStateHandler Limitations in use

    Use Netty Establish communication channel between client and server , Generally speaking , A connection may not be accessed for a long time , Due to various network problems, the connection has failed , When the client sends the request again, there will be a connection exception . For this reason , It needs to be established between the client and the server ...

  6. ./init The meaning of

    . Represents the current directory ,./ After that, it will keep up with the script file to run . Related examples ,.. On behalf of the previous Directory .

  7. Java thrift Server and client create instances

    First of all, let's introduce the environment : 1.IntelliJ IDEA 2017.1 2.thrift-0.9.3 I believe that when you read my article, you already know thrift The communication framework has been investigated , I won't go into that here , Go straight to the point : &l ...

  8. python Closures and decorators in

    I've learned the function again , It's time to sort out some of the key points again , Only closures and decorators are summarized this time 1. Closure Closure is python Function is an important function , Generally, closures are used in decorators , Generally, after learning closures, you will learn about decorators , These two ...

  9. Debian Security Advisory(Debian Safety report ) DSA-4416-1 wireshark security update

    Debian Security Advisory(Debian Safety report ) DSA-4416-1 wireshark security update Package:wireshark CVE ID : ...

  10. PaddlePaddle tutorial

    What is? PaddlePaddle PaddlePaddle, Baidu's open source platform for deep learning .Paddle(Parallel Distributed Deep Learning, Parallel distributed deep learning ). 2016 ...