Concealing and revealing elements through css styling

In my journey to learn HTML, CSS, and PHP, I took some online courses to gain knowledge. Now, I am venturing into creating a site using Wordpress to further enhance my skills through practical experience.

Recently, I created a page with a custom video field and a custom description field.

https://i.sstatic.net/lMojF.png In the image provided above, you can see that I have hidden all the description text using an HTML details tag named "About."

Upon clicking on "About," this is what I see:

https://i.sstatic.net/OSUux.png

My question is as follows: How can I hide certain elements when others are displayed? My aim is to open the page and only view the text along with a close button. Essentially, I do not want the "menu" link and the "strange magic" title to be visible when the details are open.

I attempted the following CSS code without success:

details[open] .entry-title .menu-toggle{
    display: none;
}

Do you have any suggestions or solutions for achieving this effect using CSS?

csswordpress

Answer №1

Give this a shot, it might be just what you need.

label {
  display:block;
  margin:20px 0 10px 0;
}
label:hover {
  text-decoration:underline;
}
input {
  position:absolute;
  left:-999em
}
.hide {
  width:50%;
  border:1px solid #000;
  background:rgba(148, 148, 148, 0.33);
  box-shadow: 3px 3px 10px;
  max-height:999em;
  opacity:1;
  height:auto;
  overflow:hidden;
  transition:opacity .5s linear;
}
.hide p {
  padding:10px;
  margin:0
}
input[type=checkbox]:checked + div {
  opacity:0;
  max-height:0;
  border:none;
  transition:opacity .5s linear, max-height .5s linear;
}
.follow{
  border-top:1px solid blue;margin:0;
}

Check out the Demo: https://jsfiddle.net/Pratik_009/t41nn2nh/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Arranging List Items within a Container

What's the best way to align three different elements within a div? The elements are structured in an unordered list: Left, Center, and Right. I attempted to float the right element using float: right, and applied margin: 0 auto with a set width for ...

htmlcssweb

What is the method for achieving the equivalent effect of "background-size: cover" on an <img>?

I am looking to ensure that an <img> has the smallest possible size without any empty spaces inside a div, while also being perfectly centered both horizontally and vertically. The image size may vary. To better illustrate, here is an example: http: ...

javascriptjqueryhtmlcss

What could be causing my cross fade to not repeat as intended?

I created a basic background image cross fader using the code found at http://jsfiddle.net/jRDkm/2/. This code was inspired by . However, I'm encountering an issue where the slideshow only repeats once before fading to white. How can I modify the cod ...

jquerycsssliderfade

Minimize the number of HTTP requests by including CSS and JS files in PHP

I've been considering a method to reduce the number of HTTP requests made when loading a page by minimizing the amount of downloaded files, while still keeping separate files on the server. The thought process is as follows: <!DOCTYPE html> &l ...

phpjavascriptcssperformanceimport

Is it possible to create varied background shades in CSS3 without relying on images?

Check out this fiddle: http://jsfiddle.net/dzAJp All the divs are styled with a light blue background color using the background-color CSS property instead of background-image. I want to darken the second div slightly by combining its current background ...

css

Steps for incorporating buttons and input fields on a WordPress website

I recently customized an HTML block on my WordPress.com site and created a simple code snippet to function as a search widget. I've experimented with various approaches, such as attempting to trigger a script function with a button, making the functi ...

htmlwordpress

After upgrading from Windows 7 to Windows 10, I noticed that the CSS, HTML, and Bootstrap elements seemed to have lost their impact

<!DOCTYPE html> <html> <head> <title>Registration</title> <link rel="stylesheet" type="text/css" href="styles.css"> <link rel="stylesheet" type="text/css" href="bootstrap.css"> <link href ...

htmlcss

The CSS-styled button I created is designed to display a list and has the functionality of submitting

Whenever I click on a button, it's supposed to show a list of choices. But instead, it tries to submit the values in the text input field. Css .dropbtn { background-color: #3498DB; color: white; padding: 16px; font-size: 16px; border: none; cursor ...

phpcssbuttonmenudropdown

In the latest version of Bootstrap, the carousel has been redesigned to smoothly transition across the entire page, providing a

I am currently in the process of learning Bootstrap 5 and decided to create a simple carousel by referring to the official documentation on Bootstrap 5 Carousel. Following their instructions, I copied their code and integrated it into my template. Howeve ...

htmlcsscarouselbootstrap-5

A dynamic jQuery plugin that replicates the smooth page sliding animation found in iPhone apps

Currently, I am in search of a jQuery plugin that has the capability to navigate users to different pages on a website with a sleek sliding animation, similar to what we see in some widely used iPhone apps. Despite my best efforts to create this functional ...

iphonehtmlcssanimationjquery-plugins

Trouble with white space on Hero Image? Tackling coding for the first time!

Currently a creative designer diving into the world of coding, I am eager to enhance my knowledge of HTML and CSS. Recently, I incorporated a hero image into my design but noticed some white gaps appearing on the sides. Strangely enough, it doesn't s ...

htmlcss

CSS3 Marquee Effect - puzzled

After trying numerous solutions for the marquee effect, I find myself at a dead end. Even webkit examples have failed me, as the demos don't seem to work either. My browser of choice is Chrome, but my website needs to function properly in both Chrome ...

htmlcssvalidationcss-animationsmarquee

Select the fourth element in a list using CSS

Is it possible to style the fourth child differently using the ">" selector like so: .thisclass > ul > li > ul > li { color: blue; } I am working with WordPress and trying to avoid creating additional CSS classes. Is there a way to apply s ...

htmlwordpresscss

Align the asp.net content generated towards the left side

I am looking to optimize the layout of my asp.net code by shifting the content on all pages to the left side of the screen for better efficiency. Despite my efforts, I have been unable to find a suitable CSS solution that works universally across all view ...

c#cssasp.netasp.net-mvc

Utilize JavaScript to apply the CSS -moz-transition

Creating a web application and using CSS3 to transform a div, but encountering a challenge with Firefox. Able to make Chrome, Opera, and IE work properly, except for Firefox. Here's how I'm setting up the working browsers: obj.style.WebkitTrans ...

javascriptcssfirefoxstyles

Opera browser having trouble with sidebar rendering

On my best days, I struggle immensely with troubleshooting browser display issues. The left-hand sidebar on this page () appears incorrect in Opera. While in all other browsers, the sidebar displays with an orange and tan background, for some unknown reas ...

htmlcssopera

Divide the page vertically. On the left side, feature an eye-catching image, while on the right side,

While I have a good understanding of bootstrap 5, I am currently working on a project that requires me to split the page down the center. However, I also need to incorporate a container in the middle that sets a boundary for the text so it doesn't exp ...

htmlcsstwitter-bootstrapbootstrap-5

Is it possible to rearrange the positions of 2 divs using solely CSS?

I have created a unique design. On iPad, I am assigning the class 'handHeld' to the <body>, which will trigger positional changes between optionsWrapper and #container using CSS classes I've defined below on jsfiddle.net. .handHeld d ...

javascriptjqueryhtmlcss

Issues with the animation of the navbar menu button are preventing it from functioning

I have been attempting to incorporate animation when the navbar-button is toggled on smaller screen sizes. Inspired by the design of .navbar-toggle.larr in this particular template, I tried to implement a similar effect. /* ANIMATED LEFT ARROW */ .navbar- ...

jqueryhtmlcsstwitter-bootstrapanimation

Having trouble positioning a specific element at the top right of the header navbar in Laravel Bootstrap 5

Is there a way to create a top navbar with the project name and menu on the left, and user management on the right? Currently, both options are aligned to the left. Here is an example of what I have: top navbar This navbar is placed in the header, and her ...

htmlcsslaravelnavbarbootstrap-5