Move elements from above to aside using CSS within the Bootstrap 3.0 grid system

I am currently utilizing Bootstrap 3.0 along with its grid system on my webpage, which contains two divs stacked one on top of the other.

Is there a way for users to toggle the view so that these divs appear next to each other (upon clicking a button)? Can this be achieved using just CSS3?

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-md-8 col-md-offset-2">
           <div class="alert alert-info">
               <!-- content of first div -->
           </div>
           <div class="alert alert-info">
               <!-- content of second div-->
           </div>
       </div>
   </div>
</div>
htmltwitter-bootstrapcsstwitter-bootstrap-3

Answer №1

To control the state, you can utilize an input checkbox and use a label as a button. Place the checkbox before your code like so:

<input type="checkbox" id="checkbox">
<label for="checkbox">Click me</label>
<div class="your_div">Your content here</div>

Next, add two sets of CSS styles:

#checkbox{ %styles for unchecked state% }
#checkbox ~ .your_div{ %styles for unchecked state% }

and

#checkbox:checked{ %styles for checked state% }
#checkbox:checked ~ .your_div{ %styles for checked state% }

I've tested this technique before and it works flawlessly. Check out my example on CodePen.

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

Obtaining data upon clicking a button within a Bootstrap modal

Implementing Google Map API to calculate the distance between departure and destination locations has been successful so far. However, I am encountering an issue with displaying the distance value in a Bootstrap modal after clicking on the Get the Distance ...

javascriptjquerytwitter-bootstrapbootstrap-modal

What are some alternative methods for concealing certain content in my gallery without using java script?

Currently, I am utilizing a JavaScript "show more, hide less" button on my page. However, I am facing an issue where I can't use the same button multiple times on the same page. I tried changing the ID, but it didn't work for me. I suspect I may ...

javascriptcssshow-hidebootstrap-5

Creating a clean vertical alignment for two divs using Bootstrap 3

Is there a way to automatically set the same height for #div1 and #div2 regardless of the size of my logo in Bootstrap3? If not, what would be the best CSS rules to achieve this? View Example Here <div class="masthead"> <!-- Logo + Site Titl ...

csstwitter-bootstrap

The grid is evenly populated with icons

Is it possible to evenly distribute the icons by only using CSS? I'm aiming to achieve a result similar to this (unfortunately, I can't post images due to my lack of reputation). You can find an example solution that uses JavaScript here: _htt ...

csshtmlgridmaterial-designflexbox

determine a distinctive identification for an HTML ID

<div id=Pear1> <div id=Circle></div> </div> <div id=Pear2> <div id=Circle></div> </div> <div id=Pear3> <div id=Circle></div> </div> <div id=Pear4> <div id=Circ ...

jqueryhtml

How is it possible that the sensitivity of the mobile slideshow is malfunctioning specifically when accessed through the Chrome browser in React?

My React web app features a carousel component that functions perfectly on Firefox. However, in Chrome on mobile devices, when I swipe down the page, it interprets it as a horizontal swipe and switches slides on the slideshow. The library I am using is cal ...

javascripthtmlcssreactjscarousel

Change elements in real-time

I have a requirement to adjust elements with the class .super-elem by adding an attribute adjusted="true". Initially, I can easily achieve this within the document's ready event : $(".super-elem").attr("adjusted", "true"); However, I may add more . ...

javascriptjqueryhtmlajaxdom

Using HTML files in Node.js

I'm struggling to understand how to include a file in Node.js. While other questions are focused on including JS files, I specifically need assistance with including files that contain HTML content, similar to the PHP include function. In PHP, I typi ...

htmlnode.jsexpressincludeserver-side-includes

Enhancing React-Admin with custom Material-UI theme overrides for targeted CSS selectors on a global scale

When working with React-Admin, I encountered a challenge in applying specific CSS code globally within my Material UI theme. As I set up my theme, I included the following lines in the overrides section: overrides: { "@global": { &quo ...

cssreactjsherokumaterial-uireact-admin

Enhancing JQuery UI Accordion with simple ICONS

Is it necessary to use the Jquery CSS file for adding icons, or is there an alternative method? I'm hoping I can avoid using it as I am working within Wordpress and enqueuing the Jquery CSS seems like a complex task for me. Apologies for the basic q ...

jquerycssuser-interfacejquery-uiaccordion

Is it possible to incorporate custom CSS, jQuery plugins, and HTML into my markdown file?

As I delve into the world of markdown for note-taking, I find myself struggling with limitations in terms of styling and making my notes visually appealing. One thing I would like to do is add warning or info style blocks using Bootstrap CSS. How can I ach ...

jquerytwitter-bootstrapmarkdowngithub-flavored-markdownmultimarkdown

Is there a way to implement multiple "read more" and "read less" buttons on a single page?

I am currently working on a rather large project and I am encountering some issues with the read more buttons. As someone who is fairly new to JavaScript, I am still grappling with the concepts. While I have managed to make the function work for the first ...

javascripthtmljquerycss

Guide on embedding internet audio onto an HTML webpage

I'm currently working on adding sounds and music to my program. The code that I have works perfectly when the audio files are downloaded onto my computer. However, I am looking for a way to play these sounds directly from the internet without needing ...

javascripthtml

Tips for employing e.preventDefault within the onChange event handler for a select element

Is there a way to prevent the select tag value from changing using preventDefault? I have successfully prevented input from changing the value with event.preventDefault, but have not been able to do the same for the select tag. Here is an example code sni ...

javascripthtmlselectdom-eventspreventdefault

When it comes to form validations, I encounter an issue. I am able to view errors.minlength in the console, but for some reason, I am unable to access it

I would like the message "name is too short" to be displayed if last_name.errors.minlength evaluates to true. However, I encounter an error: Property 'minlength' comes from an index signature, so it must be accessed with ['minlength']. ...

htmlangularvalidation

Personalized color palette for CSS styling

Is there a way to implement a color scheme selection feature on my HTML site using CSS? I currently have base.css, green.css, and orange.css files. By default, the site loads with the green color scheme. How can I allow users to switch to the orange color ...

htmlcss

How can I add an image to a canvas using a button?

Having trouble with my studies and looking to create a custom shirt website. Posted below is the beginner code I have: If anyone knows how to upload an image onto a shirt canvas using a button, as well as change the shirt color with another button, please ...

javascripthtmlcsscanvas

Is it possible to have scrollbars on opposite sides of a div?

My table has a multitude of columns, prompting me to enclose it within a div with overflow:auto to facilitate horizontal scrolling. Currently, the scrollbar is situated at the bottom of the div. Is it possible to have two scrollbars present, one at the t ...

htmlcssscrollbar

"Enhancing User Experience with Hover Effects in HTML using .common

I'm pretty new to coding and currently working on a Github repository. On the same page, I have 12 clickBoxes that each have a hover effect applied where a PNG appears upon hovering. However, I've run into an issue where either the hover effect w ...

htmlcssgithub

Issue with Mat-AutoComplete arising while utilizing a formArray

After adding a form array to account for multiple rows, I had to modify my definition from: shoppingCartList Observable<any[]>; to shoppingCartList: Observable<any[]>[] = [];. However, this change resulted in an error in my filter function whic ...

javascripthtmlangularangular-materialmat-autocomplete