Open div on click jquery. Smoothly opening and hiding a div using jQuery


Is there a way to handle click events in CSS without using JavaScript. You can use the method with :target. But what if it can't be used? There is another method.

Watch the demo. It is completely made in CSS, not a line of JavaScript code. It is based on the original use of the:active and:hover selectors.

Description

First you need to create a container that will contain a button and blocks that are displayed when the mouse is pressed. The markup structure will be something like this:

  • Lorem ipsum dolor sit amet.
  • Consectetur adipiscing elit.
    • Button

    We need to make .content invisible until the mouse button is pressed on .wrapper . To solve the problem, set the .content property display: none . Then, when the mouse button is pressed on .wrapper, we will include the display: block property for .content. Why set the .wrapper:active .content property display: block . In this state, .content will only be visible when the mouse button is pressed. If you release it, .content will disappear again. To fix this, let's make sure that when the mouse cursor is over .content , the element is assigned the display: block property. That is, we set the display: block property for .content:hover. The CSS code will look like:

    Content ( display: none; ) .wrapper:active .content ( display: block; ) .content:hover ( display: block; )

    All that remains is to “comb” the appearance and give it clarity:

    Wrapper ( position: relative; ) .button ( background: yellow; height: 20px; width: 150px; ) .content ( position: absolute; padding-top: 20px; ) .content li ( background: red; )

    The button text in the above code will have a yellow background, and the information displayed when the mouse button is pressed will have a red background.

    Today we will talk to you about how you can hide an element by clicking it. Or click to show it. Or on the first click - hide, and on the second click - show. In general, I think you understand what I'm talking about. Something similar was described in this article.

    But today everything will be different. The effect will be the same, but it will disappear quickly, instantly, and not smoothly. To do this, let's create the same markup:

    < div class = "block" > < h1 class = "extremum-click" >Teapots < div class = "extremum-slide" >This story is about how I once went into the forest to pick mushrooms and found a magic teapot.

    Now let's write the styles. By default, the text block is hidden. Let's add some visual effects and, most importantly, we'll slightly improve the script. By clicking on the title, we will highlight it in color. Here are the styles:

    .extremum-slide ( border : 1px solid ; padding : 50px ; display : none ; ) .red ( background-color : red ; )

    Now the script itself, which will bring this whole thing to life:

    $(document) .ready (function () ( $(".block") .on ("click" , ".extremum-click" , function () ( $(this ) .toggleClass ("red" ) .siblings ( ".extremum-slide" ) .slideToggle (0 ) ; ) ) ; ) ) ;

    That's all - you can enjoy the result. There is nothing special to tell: we click on the title.extremum-click, the text.extremum-slide is shown and at the same time the same title is highlighted. The next time you click on the title, the text block disappears.

    All page code:

    <html > <head > <meta charset = "utf-8" > <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> <style >.extremum-slide ( border:1px solid; padding:50px; display:none; ) .red ( background-color:red; )</style> <script >$(document).ready(function() ( $(".block").on("click", ".extremum-click", function() ( $(this).toggleClass("red").siblings( ".extremum-slide").slideToggle(0); )); ));</script> </head> <body > <div class = "block" > <h1 class = "extremum-click" > Teapots</h1> <div class = "extremum-slide" > </div> </div> <div class = "block" > <h1 class = "extremum-click" > Teapots</h1> <div class = "extremum-slide" > This story is about how I once went into the forest to pick mushrooms and found a magic teapot.</div> </div> <div class = "block" > <h1 class = "extremum-click" > Teapots</h1> <div class = "extremum-slide" > This story is about how I once went into the forest to pick mushrooms and found a magic teapot.</div> </div> </body> </html>

    Most of you, having read the title of this article, will say that Handling the click event in CSS impossible. However, this is not quite true. And in this article I will show how you can handle click event using only CSS.

    Let's say we have a certain tab, clicking on which should open the contents of this tab. The absolute majority will do all this on JavaScript, but in fact, in this case, the click event can be easily handled via CSS.

    To begin with, the most common HTML code:


    Contents 1

    Tab 1



    Content 2

    Tab 2

    Nothing unusual, except that the tab name is located below the content, later, you will understand why. And now CSS code:

    Tabs (
    float: left; /* Place all tabs on one line */
    margin: 10px; /* Indent tabs from each other */
    }
    .content(
    display: none; /* Hide the contents */
    padding-top: 20px; /* So that the tab title is below the content */
    position: absolute; /* To prevent content from moving elements on the page */
    }
    .tabs:active .content (
    display: block; /* When we click on the tab, we open the content content */
    }
    .content:hover (
    display: block; /* While the cursor is hovering over the content, do not close it */
    }

    The algorithm is as follows: when you click on the name of the tab, the pseudo-element is automatically triggered active, but since it will only work when the key is pressed, as soon as we release it, the content will close. To prevent this from happening, we add a condition that if the cursor is hovered over the content (pseudo element hover), then it will not close. And in order for our cursor to automatically end up on the content by clicking on the tab, we placed the button below the content, and also made a field at the top. Thus, by clicking on the name of the tab, we click on the content too, so after clicking we can safely release the mouse button, and we will continue to “hold” the content while hovering the cursor.

    In the process of creating a website or blog and further filling it with content, for various reasons, sometimes it becomes necessary to hide some part of the text, place more voluminous information in a block hidden for the time being, but still indicate to the user what is available something else, and give him the opportunity to view hidden content without moving to the next line or page.
    Previously, a bunch of javascript was used to implement such a solution, but now all this can be done very easily using amazing properties.

    Today we will look at the simplest way to create hidden blocks of content on site pages and in individual messages that open when you click on a certain text element, using exclusively CSS3 properties. A switch can be a single word, a highlighted phrase, a whole sentence, or an informative icon.
    Such blocks are often used on pages with a large amount of content, in order to make it more structured and compact, all content is divided into so-called groups, in which only headings are presented to the user, all text is hidden by default and can be seen by clicking to a specific element (see above).

    Let's try to do without unnecessary water, look at this entire simple mechanism in action, with a clear example, and you can also edit something if you wish:

    Example No. 1

    Unselected and unmarked text is used as switches for drop-down blocks with additional information, with an unambiguous invitation to click on it, which you must do without fear or doubt to see)))

    As you can see, everything works more than perfectly, the hidden content appears without problems and disappears with a light click of the mouse, and at the same time we used the very minimum of executable code, both in the html framework and in the formation of css styles. Without connecting additional javascript libraries, with the eternal worry whether they are disabled on the user’s side.
    Implementing all this action became possible thanks to the CSS3 pseudo-class :checked, applied to interface elements such as radio buttons (). What we actually did in the tag We assigned the type attribute the value checkbox , as well as the identifier id="hd-1" corresponding to the unique identifier for="hd-1" current block switch. We will hide the checkboxes thoroughly and forever by setting the display: none property in the class.hide.
    Actually, there’s nothing special to explain here; the entire mechanism for turning on and off hidden blocks consists of three elements:

    • Checkbox - tag with meaning checkbox attribute type and with a specific linking identifier
    • Title (text switch) - tag with a unique identifier value for the attribute for, (the identifier must be the same as the tag identifier input with meaning checkbox attribute type).
    • The content block is a div tag, which will contain, until better times, until the user clicks, various hidden content (text, images, etc., etc.)

    I hope that from my chaotic explanation, it has become clear what the whole point is. The CSS applies new styles (using the pseudo-class checked) to show a block of content that was previously hidden only when the user clicks on an element that is associated with a checkbox by a unique identifier.

    From all this it follows important note:

    When you use multiple hidden blocks on the same page, each radio button must have a unique ID that will be different from the IDs in other blocks.

    So, in words we have sorted out what goes where and why, now, let's look at the html framework of the entire structure:

    < input class = "hide" id= "hd-1" type= "checkbox" > < label for = "hd-1" >Click here to open! < div>Hidden content...... < input class = "hide" id= "hd-2" type= "checkbox" > < label for = "hd-2" >Click here to read more! < div>Hidden content...

    Hidden content......
    Hidden content...

    Next, we move directly to the formation of CSS styles, without which this entire design will not work. The very minimum of code, without any decoration, just slightly highlighted the background for the drop-down block to define for you and show the frame of the hidden text. You can design the blocks as you please, add borders, round corners, highlight text, or .

    1.CSS

    . hide, . hide + label ~ div ( display: none; ) /* label text type */. hide + label, . hide: checked + label ( padding: 0 ; color: green; cursor: pointer; border- bottom: 1px dotted green; ) . hide: checked + label + div ( display: block; background: #efefef; - moz- box- shadow: inset 3px 3px 10px #7d8e8f; - webkit- box- shadow: inset 3px 3px 10px #7d8e8f; box- shadow: inset 3px 3px 10px #7d8e8f; padding: 10px; )

    /* hide checkboxes and content blocks */ .hide, .hide + label ~ div ( display: none; ) /* label text appearance */ .hide + label, .hide:checked + label ( padding: 0; color: green; cursor: pointer; border-bottom: 1px dotted green; ) /* appearance of the label text when the switch is active */ .hide: checked + label ( color: red; border-bottom: 0; ) /* when the checkbox is active, show blocks with content */ .hide:checked + label + div ( display: block; background: #efefef; -moz-box-shadow: inset 3px 3px 10px #7d8e8f; -webkit-box-shadow: inset 3px 3px 10px #7d8e8f; box-shadow: inset 3px 3px 10px #7d8e8f; padding: 10px; )

    This is all, for an ascetic example, a completely sufficient minimum. But we won’t be us at all if we don’t add at least some goodies, and it’s better to visually tell the user where to click.
    In the second example, I added a simple symbol in the form of a plus, which clearly indicates that something else is hidden here; when pressed, it instantly turns into a minus, and I added a little animation to the hidden blocks with content when they appear, and all this exclusively with the help the magic of CSS3.

    2.CSS

    /* hide checkboxes and content blocks */. hide, . hide + label ~ div ( display: none; ) /* label text type */. hide + label ( margin: 0 ; padding: 0 ; color: green; cursor: pointer; display: inline- block; ) /* appearance of the label text when the switch is active */. hide: checked + label ( color: red; border- bottom: 0 ; ) /* when the checkbox is active, show blocks with content */. hide: checked + label + div ( display: block; background: #efefef; - moz- box- shadow: inset 3px 3px 10px #7d8e8f; - webkit- box- shadow: inset 3px 3px 10px #7d8e8f; box- shadow: inset 3px 3px 10px #7d8e8f;margin-left: 20px;padding: 10px; /* a little animation when appearing */- webkit- animation: fade ease- in 0. 5s; - moz- animation: fade ease- in 0. 5s; animation: fade ease- in 0. 5s; ) /* animation when hidden blocks appear */@- moz- keyframes fade ( from ( opacity: 0 ; ) to ( opacity: 1 ) ) @- webkit- keyframes fade ( from ( opacity: 0 ; ) to ( opacity: 1 ) ) @ keyframes fade ( from ( opacity: 0 ; ) to ( opacity: 1 ) ) . hide + label: before ( background- color: #1e90ff; color: #fff; content: " \002 B"; display: block; float: left; font-size: 14px; font-weight: bold; height: 16px; line-height: 16px; margin: 3px 5px; text- align: center; width: 16px; - webkit- border- radius: 50%; - moz- border- radius: 50%; border-radius: 50%; ) . hide: checked + label: before ( content: " \221 2" ; }

    /* hide checkboxes and content blocks */ .hide, .hide + label ~ div ( display: none; ) /* label text appearance */ .hide + label ( margin: 0; padding: 0; color: green; cursor : pointer; display: inline-block; ) /* appearance of the label text when the switch is active */ .hide:checked + label ( color: red; border-bottom: 0; ) /* when the checkbox is active, show blocks with content */ . hide:checked + label + div ( display: block; background: #efefef; -moz-box-shadow: inset 3px 3px 10px #7d8e8f; -webkit-box-shadow: inset 3px 3px 10px #7d8e8f; box-shadow: inset 3px 3px 10px #7d8e8f; margin-left: 20px; padding: 10px; /* a little animation when appearing */ -webkit-animation:fade ease-in 0.5s; -moz-animation:fade ease-in 0.5s; animation: fade ease-in 0.5s; ) /* animation when hidden blocks appear */ @-moz-keyframes fade ( from ( opacity: 0; ) to ( opacity: 1 ) ) @-webkit-keyframes fade ( from ( opacity: 0 ; ) to ( opacity: 1 ) ) @keyframes fade ( from ( opacity: 0; ) to ( opacity: 1 ) ) .hide + label:before ( background-color: #1e90ff; color: #fff; content: "\002B"; display: block; float: left; font-size: 14px; font-weight: bold; height: 16px; line-height: 16px; margin: 3px 5px; text-align: center; width: 16px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; ) .hide:checked + label:before ( content: "\2212"; )

    By all accounts, the method is undoubtedly good, but as always, and not at all surprising, problems arise with the eternal brake on progress, the IE browser, pseudo-class checked only support versions 9 and later of this browser. For older versions of IE, everything remains the same, you will have to use javascript.

    Using hidden checkboxes, you can easily implement styled blocks, sliders, galleries and much more.

    With all respect, Andrew
    

    2024 gtavrl.ru.