Display an element only when it is contained within another element

I've been attempting to develop a container with two components that slide in when clicked, swapping one for the other, but I want them to only be visible within the container.

Here's my not-so-great code, please help me out.

HTML

<input id="toggle" type="checkbox">
<label for="toggle">
  <button>switch</button>
</label>
<div id="box" style="background:rgba(0, 0, 0, 0.4); box-shadow:inset 0px 0px 10px 0px #000;
    text-shadow: 2px 2px 2px #000; padding: 5px 5px 5px 5px; letter-spacing: 0px; font-size: 18px;">
  <div id="slider">
    <table>
      <tr>
        <td id="t2"><a id="s2" href="https://soundcloud.com/" target="_blank" rel="noopener nofollow">Soundcloud</a></td>
        <td id="t2"><a id="s2" href="https://mixcloud.com/" target="_blank" rel="noopener nofollow">Mixcloud</a></td>
        <td id="t2"><a id="s2" href="bandcamp.com" target="_blank" rel="noopener nofollow">Bandcamp</a></td>
        <td id="t2"><a id="s2" href="https://hearthis.at" target="_blank" rel="noopener nofollow">Hearthis.at</a></td>
        <td id="t2"><a id="s2" href="https://archive.org" target="_blank" rel="noopener nofollow">Archive</a></td>
      </tr>
    </table>
  </div>
  <div id="slider2">
    <table>
      <tr>
        <td id="t2">1111111111111</td>
        <td id="t2">222222</td>
        <td id="t2">333333</td>
        <td id="t2">4444444444</td>
        <td id="t2">5555555</td>
      </tr>
    </table>
  </div>
</div>

CSS.

#box {
    height: 50px;
    width: 100%;
    border: 1px solid #ccc;
}
#slider {
    -webkit-transition: all .5s cubic-bezier(0.42,0,0.58,1);
    transition: all .5s cubic-bezier(0.42,0,0.58,1);
}
#toggle {
    position: absolute;
    visibility: hidden;
}
#toggle + label {
    cursor: pointer;
}
#slider2 {
    margin-top: -100px;
    overflow-y: hidden;
    -webkit-transition: all .5s cubic-bezier(0.42,0,0.58,1);
    transition: all .5s cubic-bezier(0.42,0,0.58,1);
}
#toggle:checked ~ #box > #slider {
    margin-top: -80px;
}
#toggle:checked ~ #box > #slider2 {
    margin-top: 50px;
}

https://codepen.io/pen/xdeevd

htmlcss

Answer №1

To make it work, simply include overflow:hidden in the box.

#box {
    overflow: hidden;
    height: 50px;
    width: 100%;
    border: 1px solid #ccc;
}

Answer №2

Implement a parent and child class structure, where the Child class is initially set to hidden. See the example below:

CSS :

.child{display:none}
.parent .child{ display:block }

HTML :

<div class="parent">
     <div class="child"> Visible Division </div>
</div>
<div class="child">Hidden Division</div>

Answer №3

Your method of hiding is not effective.

To make it work, try changing the CSS below:

#toggle {
position: absolute;
opacity: 0; 
}
#toggle:checked ~ #box > #slider2{
    margin-top: 10px;
    display: block;
}
#toggle:checked ~ #box > #slider{
    display: none;
}

Feel free to get creative with additional animations or search online for ways to hide checkboxes while keeping them functional.

Thank you, Debashis

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

Update the image source every 20 pixels

I am trying to adjust the image source while scrolling down by 20 pixels, so that after 100 pixels the image source changes 5 times, with the initial src image being "falling-05.png". Despite following various tutorials, the implementation doesn't see ...

javascripthtmlcss

Problem arising with CSS transitions positioned under an image

Let me illustrate the issues I am facing. The concept involves splitting a webpage into two sections, with the left side utilizing CSS transitions and the right side displaying the actual content. Example 1: In this example, I have a gray image filling ...

htmlcss

Exploring the capabilities of XPath in Selenium

I am looking to create an xpath expression for the following sequence : Navigate to au.support.tomtom.com Click on the Flag icon in the footer. Select Australia as the country So far, I have attempted the following: driver.get("http://au.support.tomt ...

javascriptjqueryhtmlseleniumxpath

Issue with Bootstrap modal not closing automatically after submitting an ajax form

I am facing an issue with a modal on my page that is used for submitting courses registered by students. Even after successful submission, the modal closes but leaves behind a faded background. I have attempted various solutions from StackOverflow without ...

phphtmljqueryajax

What is the best way to combine multiple classes when declaring them in CSS?

I'm attempting to combine the following code snippets (possibly misunderstood the term) - is there a way to have them both perform the same function without creating another class with identical attributes? .games span { display: inline-block; ...

cssclassconcatenationhtml

Is it possible to utilize PHP for creating mobile applications in order to submit HTML forms via email?

Currently exploring the creation of an HTML app with Cordova. I have experience creating forms for websites and using PHP to send form submissions via email. However, I am unsure if I can use PHP in my app for this purpose. Are there any resources or art ...

phphtmlcordovaemailcross-platform

Is there a way to align text with a certain element and ensure that it remains in place regardless of the screen size?

I need the word "social" to remain in line with the black bars, both on regular devices and mobiles. Although in bootstrap/html it may not align perfectly, it still stays close to the black bars. See example here Here is the code. Even though I can adjus ...

htmlcssbootstrap-4

Using attribute value for CSS background-image styling is a handy technique to

In my current situation, the design calls for the use of two different images as background images - one for desktop and another for mobile. These images are uploaded through a CMS, allowing me to retrieve the URLs for both using PHP. Is there a way to pa ...

phphtmlcssattributes

Change the way a button interacts with a different element

Currently, I am utilizing SlickSlider from http://kenwheeler.github.io/slick/ and attempting to integrate the Next and Prev buttons with other elements (specifically spans within another container). I have attempted the following: $('button.next&apo ...

javascriptjqueryhtmlsliderslick.js

Concealing the URL Once Links are Accessed

I have a Movie / TV Shows Streaming website and recently I've noticed visitors from other similar sites are coming to my site and copying my links. Is there a way to hide the links in the address bar to make it more difficult for them to access my con ...

phpjavascripthtml

The model is only loaded when I access the developer toolbar

Recently, I encountered an issue while working with a three.js mesh. Upon opening the webpage in Chrome or Firefox (I haven't tested it on IE), everything seemed fine but the canvas displaying the mesh did not appear. It was only after activating the ...

javascripthtmlthree.js

The coverflow of Swiper is not displaying properly within a Div container

Just to clarify, I am not very experienced and do not know many best practices. I am learning as I go along with projects. I am using Swiper for a game list slider, but when I place it inside another Div, it disappears completely. I can position and size ...

javascriptjqueryhtmlcssswiper.js

"Utilize PrimeNG's p-tabpanel to bind a unique style class to

When using the tabview component from PrimeNG, I am encountering an issue where I am unable to bind a header style class. Here is my static HTML code that works: <p-tabPanel header="Title" headerStyleClass="badge" formGroupName=&quo ...

htmlcssangularprimeng

Use Angular and JavaScript to fetch HTML from a mySQL database and dynamically render it on a webpage

I'm currently utilizing Angular for the front end and Node for the back end. The data is retrieved from a MySql database where it's manually stored in text format with HTML tags. For example: <ul> <li>item1</li> <li> ...

javascriptmysqlangularjsjsonhtml

Is there a method to make an <img> automatically adjust its width to fit that of its containing <div> even if the style/attributes are

If I'm unable to customize the style, tag, or attributes of an image element, is there a way to make its width adjust to fit a parent division or another container? This situation pertains to an email template, so external stylesheets, <style> ...

htmlcss

changing the value of a jQuery variable when an event occurs

Currently, I am working on an interactive jQuery experience where I want my character to navigate through multiple rooms. $(document).keydown(function(e) { switch (e.which) { case 39: $("#barry").attr("src", "img/characters/BarryBa ...

javascriptjqueryhtml

Rectangular clipping with CSS3 animation and transitions

I have been working on a JSFiddle code where I am trying to apply a clip to an image using only CSS, but unfortunately, I have not had any success so far. Initially, I attempted to place the image within an external div and apply the clip to that div, but ...

css

Struggling to align list-items in a horizontal manner

I'm having trouble aligning the list-items in my horizontal navbar. Can anyone assist me in identifying the error? Below is the HTML code, which has a complex structure due to the use of the Wordpress thesis theme and Cufon for font replacement: < ...

csscss-floatinline

Position the text to the right of an image

Upon close observation of the page , you may notice that the 5th wine, AMARONE, has text wrapping around and under the bottle image. Is there a method to prevent this from occurring and instead have all the text on the right side without needing to create ...

css

What advantages do constant variables offer when selecting DOM elements?

What is the significance of declaring variables as constant when selecting elements from the DOM? Many developers and tutorials often use const form = document.querySelector('form'); ...

javascripthtmldom