Open a block with one click. Click event in pure CSS without:target



On almost every site you can see buttons - More details, Information, Open/Hide information and the like. When you click on them, a block with the relevant information gradually opens. How to implement this?

Simple enough. Using JS (jQuery library). Let's connect it from the Google server:


Now the full example. In order not to take it apart and not confuse you, I will comment on all the main points right in it.







$(document).ready(function() (
$("A#trigger").toggle(function() (
// Display the hidden block
$("DIV#box").fadeIn(); // fadeIn - smooth appearance

},
function() (
// Hide the block
$("DIV#box").fadeOut(); // fadeOut - smooth disappearance
return false; // do not follow the link
)); // end of toggle()
)); // end of ready()


Show/hide information
Hidden block content



Don't forget that in this example we are connecting jQuery remotely. The example will not work on a local computer without Internet access.
Let's look at the result of opening and hiding a block using jQuery:

How to create spoilers in jquery or several open/close blocks? Due to numerous requests from readers, I am creating a separate section with an example and files for downloading. If you have several spoiler blocks that need to be smoothly opened and closed using jquery, if you need commands to close or open everything, then see the example below:




Spoilers


$(document).ready(function())(
$(".spoiler_links").click(function())(
$(this).parent().children("div.spoiler_body").toggle("normal");
return false;
});
});


.spoiler_body (display:none;)
.spoiler_links (cursor:pointer;)



Spoiler No. 1 show / hide

Text in the first spoiler
Text in the first spoiler


Spoiler No. 2 show / hide

Text in the second spoiler
Text in the second spoiler




The example is completely assembled. You just need an Internet connection to load jQuery from Google libraries.

Often in our projects we need to bind a specific action to a user action. For example, when you click the left mouse button on a certain div (block), the color of this block changes. In general, pressing the left mouse button is called click. To process this event, javascript and jquery are mainly used, but it is also possible to track a click using CSS. This is what we will talk about in this post. Of course, a legitimate question arises: why track using CSS click, everything works fine using javascript. But if js is disabled in the user’s browser, then the functionality of the site will not be complete, and click css will always work. There are several methods to handle the css click event. The first one is "checked"

"checked" method

First, let's write some html and css code.

click me

If the background is red then the checkbox is selected

Checkbox selected

.box( width: 200px; height: 100px; background-color: crimson; position: relative; z-index: -10;/*make it the bottom layer*/ margin: 0 auto; margin-top: 50px; ) .noncheck1 , .noncheck2, .noncheck3( width: 200px; height: 100px; display: block; position: relative; background-color: lightgrey; z-index: 10px;/*topmost layer*/ ) .check( width: 200px; height: 100px; display: block; position: absolute;/*due to absolute position, shifted under the top layer*/ top: 1px; left: 1px; z-index: -1;/*middle layer*/ ) label(/ *button*/ font-size: 23px; display: block; ) input(/*hide the checkbox*/ display: none; ) input:checked ~ .box .noncheck1(/*hide the top layer when checked, the middle text layer is visible and bottom layer*/ display: none; )

Let's look at the code. We have three blocks.box, .noncheck1, .check. They are all positioned relative to each other so that the .check block is under .noncheck1. I didn’t put the CSS of the buttons in the listing because it’s not important. And now we begin to understand the “checked” method. The method is based on the use of the checkbox element and its checked attribute. We click on the checkbox and its state changes to checked. We bind a change to this event using the css selectors “~” or “+”. For example, changing the text or background color of a certain element. In the example, we select the checkbox and in div.box div.noncheck1 becomes invisible (display: none), we can see div.check. In order to design the background state switch as a button, we assign a label to our checkbox and create a button from it. Now we don’t need the checkbox (we have a button) and we hide it (display: none)

Method "target" On Off .noncheck2:target( display: none; )

The target method works on this principle. We create a button.butt2 with the On link. In the link we assign the hash tag "#On". When you click on a link in the form of a button with a hashtag, you go to the div with id="On". This div hits target. The target pseudo-class is activated. We have hidden the div.noncheck2 for this event also due to display: none. When you click on another link-button, the div leaves the target, as the target moves to another block. Div.noncheck2 appears again.

Method "tabindex" On Off .butt4:focus ~.box .noncheck3 ( display: none; )

This method is based on the use of the tabindex attribute. It lies in the fact that we can set the input focus to some elements of the web page using tabindex. The element receives a focus event (.butt4:focus) which can be handled using CSS. We use the "~" neighbor selector to assign the display: none state to the .noncheck3 element when the .butt4:focus event occurs. When our focus moves from a button to another page element, noncheck3 returns to its original state.

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:

.extremum-slide ( border:1px solid; padding:50px; display:none; ) .red ( background-color:red; ) $(document).ready(function() ( $(".block").on( "click", ".extremum-click", function() ( $(this).toggleClass("red").siblings(".extremum-slide").slideToggle(0); )); )); Teapots Teapots This story is about how I once went into the forest to pick mushrooms and found a magic teapot. Teapots This story is about how I once went into the forest to pick mushrooms and found a magic teapot.

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.

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

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

    First, 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 the 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 active pseudo-element is automatically triggered, 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 (the hover pseudo-element), it will not be closed. 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 added a field on 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.
    

    2024 gtavrl.ru.