modifying the width of the primary container following the display or concealment of an alternate container

Question

modifying the width of the primary container following the display or concealment of an alternate container

I am working on a main div that contains two separate divs for main content and sidebar content. The sidebar content can be hidden or shown by clicking a link. When the sidebar is hidden, I want the content div to occupy the entire space within the container div. However, when the sidebar content is shown, I need it to give some space to the sidebar on the left while adjusting itself accordingly. You can view the code example here. Currently, I am using jQuery to implement this functionality, but I'm open to better ways of achieving it. Thanks!

jquery html css

Answer 1

Answer №1

You're on the right track! I've made some tweaks to your code. Essentially, what you need to do is rearrange your elements so that the sidebar comes first, float both the sidebar and main content to the left, and remove any width specifications for the main content.

<div id="container">
    <div id="sidebar">
        Sidebar Content
    </div>

    <div id="maincontent">
        Main Content
    </div>
</div>

#maincontent {
    float: left;
    border: 1px solid green;
    height: 400px;
}

#sidebar{
    float:left;
    width:200px;  
    border: 1px solid blue;
    top:10px;
    height: 200px;
}

Answer 2

You're on the right track! I've made some tweaks to your code. Essentially, what you need to do is rearrange your elements so that the sidebar comes first, float both the sidebar and main content to the left, and remove any width specifications for the main content.

<div id="container">
    <div id="sidebar">
        Sidebar Content
    </div>

    <div id="maincontent">
        Main Content
    </div>
</div>

#maincontent {
    float: left;
    border: 1px solid green;
    height: 400px;
}

#sidebar{
    float:left;
    width:200px;  
    border: 1px solid blue;
    top:10px;
    height: 200px;
}

modifying the width of the primary container following the display or concealment of an alternate container

Answer №1

Similar questions

Troubleshooting issue: Inability to assign classes to child elements within divs of a designated class

The 'utf-8' codec is unable to interpret the byte 0x96 at position 227, as it is an invalid start byte

Ways to incorporate a php file based on the user's selection

Ways to interact with popup windows using Selenium

How to prevent jQuery from continually recalculating width on window resize?

"The Jquery new Date function is returning inaccurate data when trying to pass it in the format yyyy dd

Alignment of Material within Two Adjacent Divisions

Steps to calculate the number of rows in a gridview on a webpage with asp.net by utilizing jQuery

How to generate a 2D structure using JavaScript?

Is there a more efficient method to halt a jQuery animation plugin? Surely, there must be a more effective solution

Utilizing CSS for modifying spacing within a span element

Managing a variable amount of form input values

Maintaining consistent row height in bootstrap when displaying or hiding a button

Tips for sending post data to php script through an ajax request

Joomla CSS styling malfunctioning

What is the best way to ensure a div container fills the entire height of the screen?

The display:flex property with justify-content:space-around is malfunctioning in React and causing issues

Images in the navigation bar are bouncing around on the page, even though the CSS and HTML configurations

Customize context menu events based on the exact section where the menu was activated

Selenium is having trouble reading the text from a dropdown that has the autocomplete feature disabled