Display column on desktop, activate column on mobile device

What I have created is a layout with two columns, each taking up 50% of the desktop screen. When viewing on mobile, typically we would make the columns 100% to fit the smaller screen. However, in my case, I want the right column to be hidden on mobile and only appear when triggered by a link in the left column. Can someone please help me achieve this as I am currently unsure how to proceed.

<div class="container">
<div class="col left">
    <p><a href="#">Expand Right Column on mobile only</a></p>
</div>
<div class="col right">
    <p>Content to be displayed on desktop but only expanded on mobile when triggered from the link above</p>
</div>

javascriptjqueryhtmlcss

Answer №1

@media (max-width: 800px) {
    .left, .right {
        width: 100%;

    }
    .right{display: none;}
}

To hide the right div, add display:none;

Change: To reveal the hidden div, follow these instructions:

<div class="container">
    <div class="col left">
        <p><button type="button" 
onclick="document.getElementById('right').style.display = 'block'">
Click Me!</button></p>
    </div>
    <div id="right" class="col right">
        <p>Content that will appear on desktop and expand on mobile when triggered above</p>
    </div>
</div>

Check out the JSFiddle here

Update: JSFiddle for toggling the display attribute

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

Adjusting the width of innerHtml within a React router link to match the parent element's width

My current challenge involves a table where a cell is represented as a link. Within this setup, I am incorporating html content into the text of the link: <TableCell align="left" classes={{root: classes.cellPadding}}> <Link className={classes.l ...

javascripthtmlcssreactjs

Unpredictable Redirection when URL is Clicked using PHP or Javascript

Looking to send users to a random URL from a specific list? For instance: With 3 URLs available - Google.com, Facebook.com, and Yahoo.com <a href="<?php $sites[array_rand($sites)] ?>">Click here</a> Upon clicking the link, users will ...

javascriptphpjqueryhtmlajax

Django static files reference

sample code snippet tooltip reference navigating to the correct file path FILES: settings.py STATICFILES_DIRS = [ BASE_DIR / "static" , ] base.html {% load static %} How can I properly link my static files in the html line below?... &l ...

pythonhtmlcssdjangoweb

What steps can I take to implement HTML5 validation that mandates passwords to be a minimum of 5 characters long?

My journey into the world of HTML5 validation has just begun. Could anyone guide me on the process to validate that an <input> field contains more than 5 characters? ...

csshtml

Selenium tutorial: Navigating to a specific div on a webpage

I am facing a challenge on my webpage where only one specific div is scrollable, not the entire page. Is it possible to use Selenium to scroll that particular div? Alternatively, I am open to using JavaScript as well if that would allow me to execute the n ...

javascriptseleniumweb-scrapingscroll

What is the best way to track and display the window.scrollY value in the console using Next.js

Unfortunately, my ScrollToTop component is not functioning correctly within my app. I have exhausted all possible debugging methods but am still unable to determine why the scrollY value is not being logged as expected. Even after moving the snippet to a ...

javascriptreactjsnext.js

Moving from _document.tsx to layout.tsx and managing additional server attributes

In the past, I utilized _document.tsx to manage certain script logic that needed to be executed very early. For instance, I used it to implement dark mode code to prevent flickering that may occur with useEffect. Here is an example of my _document.tsx: im ...

javascriptreactjsnext.js

Error occurs when attempting to filter data through input text pasting in Angular

Currently, I am working on a web application that utilizes the Angular framework and angularfire2. The issue I am encountering is related to the data filter functionality not functioning correctly when pasting copied text. Interestingly, it works perfectly ...

javascriptangularangularfire2

Accessing a remote network via ajax and establishing cookie permissions

I'm currently developing an application that pulls information from another system and embeds it in mine using iframes. It's crucial for me to be able to authenticate against the external system. Initially, I had a working solution where I used ...

jqueryajaxcookies

Why is it impossible to nest schemas without using an array?

Can anyone explain why mongoose schema definitions don't allow something like this: var NameSchema = new mongoose.Schema({ first: {type: String, trim: true }, last: {type: String, trim: true } }); var UserSchema = new mongoose.Schema({ name: N ...

javascriptnode.jsmongodbmongoose

When I click on the md-select element, a superfluous "overflow-y: scroll;" gets added to the <body> of my webpage

Typically, I have the following styles on my body: element.style { -webkit-app-region: drag; } However, when I interact with a md-select element (you can observe this behavior on the provided link), additional styles are applied. element.style { -w ...

javascripthtmlcssangularjsangular-material

What is the solution for getting `overflow-x` to function in place of `overflow-y`?

I have a main container with several sub-containers inside. When the main container's width exceeds its limit, I want to display a horizontal scroll bar. Instead of using the 'display: inline-block' property because it creates unwanted whit ...

htmlcss

Align text to left and right on mobile using Bootstrap's custom class

I am trying to achieve a responsive design for my form labels by using the text-right class. However, I want the label to left align when the screen size is reduced so that it appears at the top-left instead of the top-right. Despite changing the text-alig ...

cssbootstrap-4

What is the best way to execute a node script within a Vite React project?

I am currently working on a project to create a single-page application where users can execute Presto queries. I have successfully written a Node script using a Presto client, and it works flawlessly when run via Node. However, I am now trying to integrat ...

javascriptnode.jsreactjsprestovite

Attempting to develop a search feature for a multi-layered array using JavaScript

I've been attempting to search through a multidimensional array in JavaScript, but I'm facing some issues. Specifically, I am looking to input the first number from one of the 3 rows and retrieve the entire row. Essentially, my goal is to extract ...

javascripthtmlarrayssearchmultidimensional-array

Tips for rearranging array position retrieved from API in Vue.js

props: { groups: Array, }, computed: { groups: function(arr) { alert('hi') } }, <div v-for="(item, index) in groups" :key="item.id" :id="item.id" class="group-name" @click="isOnlySelected ? null : $emit('setSele ...

javascriptvue.jsaxios

Tips for executing a function when the PhoneGap/jQuery Mobile iOS app loads

Since implementing jQuery Mobile, the code that used to work fine is no longer executing the onbodyload function. I am not getting any of the test alerts and it seems like the issue lies in the execution of the onbodyload function. How can I fix this? < ...

jqueryiosjquery-mobilecordova

Can you explain the significance of "===" and the key distinctions it has from "=="?

Related Query: Javascript === vs == : Does it matter which “equal” operator I use? What is the significance of using === in jQuery/Javascript, and how does it differ from ==? For instance, in my code snippet below: if ($this.val() != &a ...

javascriptjquery

What is the best way to create a cornered button using CSS?

Is there a way to create a button using only CSS? https://i.stack.imgur.com/7mjVV.png This is the code I've come up with so far: .customButton { width: 100px; height: 100px; background: #6d1a3e; position: relative; transform: rotate(-90 ...

css

Slide your finger upwards to shut down the mobile navbar in bootstrap

Hey there, I'm currently developing a website using Bootstrap framework v3.3.4. I have a mobile navbar that opens when I click a toggle button, but I would like it to slide up to close the navigation instead. Here is an image showing the issue Do y ...

javascriptjquerytwitter-bootstrap