Concealing a message within a section that has been minimized to a width of 0

Question

Concealing a message within a section that has been minimized to a width of 0

Recently, I've encountered a challenge in attempting to set the width of a section to 0 and have all its contents also disappear. Despite changing the section's width to 0px, the text inside continues to be displayed and even shifts off to the side. Is there a way to utilize either CSS or JavaScript to hide the text and then reveal it when the section's width returns?

If you want to take a look at the code on jsfiddle, here's the link: http://jsfiddle.net/t6ck9ajb/

$(document).ready(function(){
        $("#about").click(function(){
        if ($("#about-me").css("width") <= "0vw") {
            $("#introduction").animate({width:"0vw"}, 500);
            /*$("#intro").css("display","none");
            $("#port").css("display","none");
            $("#about").css("display","none"); */
        }
        else {
            $("#introduction").animate({width:"0vw"});
        }
        });
        });

Although this is my attempt at hiding the text, it didn't work as expected.

javascript jquery css

Answer 1

Answer №1

Presenting an alternative method:

$(function(){
  $('#about').on('click', toggleHomeAbout);
  $('#home').on('click', toggleHomeAbout);
});

function toggleHomeAbout(){
  $('#introduction').toggleClass('active');
  $('#about-me').toggleClass('active');
}

* {
margin: 0px 0px;
padding: 0px 0px;
font-family: "Open Sans";
}

#container{
    width: 100vw;
height: 100vh;
    overflow:hidden;
    position:relative;
}
...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div id="container">
<section class="full-page right" id="about-me">
<h1 id="information">About Me</h1>
<a id="home">Back home</a>
</section>
<section class="full-page left active" id="introduction">
<h1 id="intro">Hello, my name is<br/><span class="big">Michael!</span>  </h1>
<a id="port">Portfolio</a>
<a id="about">About Me</a>
</section>
    </div>
</body>

Answer 2

Presenting an alternative method:

$(function(){
  $('#about').on('click', toggleHomeAbout);
  $('#home').on('click', toggleHomeAbout);
});

function toggleHomeAbout(){
  $('#introduction').toggleClass('active');
  $('#about-me').toggleClass('active');
}

* {
margin: 0px 0px;
padding: 0px 0px;
font-family: "Open Sans";
}

#container{
    width: 100vw;
height: 100vh;
    overflow:hidden;
    position:relative;
}
...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div id="container">
<section class="full-page right" id="about-me">
<h1 id="information">About Me</h1>
<a id="home">Back home</a>
</section>
<section class="full-page left active" id="introduction">
<h1 id="intro">Hello, my name is<br/><span class="big">Michael!</span>  </h1>
<a id="port">Portfolio</a>
<a id="about">About Me</a>
</section>
    </div>
</body>

Answer 3

Answer №2

One simple way to conceal the content when the '#about' selector is activated is by employing the $('#introduction').toggle() method.

Answer 4

One simple way to conceal the content when the '#about' selector is activated is by employing the $('#introduction').toggle() method.

Answer 5

Answer №3

The problem is related to CSS. To resolve it, you should include the line overflow: hidden; in the section where you want content to be concealed when the width changes, specifically within the element #intro.

Answer 6

The problem is related to CSS. To resolve it, you should include the line overflow: hidden; in the section where you want content to be concealed when the width changes, specifically within the element #intro.

Answer 7

Answer №4

Check out this demo for the proposed animation: demo

Cascading Style Sheets (CSS):

#introduction {
    z-index: 1;
    visibility:"visible";
    overflow:hidden;
}

jQuery Code:

$(document).ready(function () {
    $("#about").click(function () {
        if ($("#about-me").css("width") <= "0px") {
            $("#introduction").animate({
                width: "0px"
            }, 500, function () {
                $("#introduction").css("visibility", "hidden");
            })
        } else {
            $("#introduction").animate({
                width: "0px"
            });
        }
    });

});

Answer 8

Check out this demo for the proposed animation: demo

Cascading Style Sheets (CSS):

#introduction {
    z-index: 1;
    visibility:"visible";
    overflow:hidden;
}

jQuery Code:

$(document).ready(function () {
    $("#about").click(function () {
        if ($("#about-me").css("width") <= "0px") {
            $("#introduction").animate({
                width: "0px"
            }, 500, function () {
                $("#introduction").css("visibility", "hidden");
            })
        } else {
            $("#introduction").animate({
                width: "0px"
            });
        }
    });

});

Concealing a message within a section that has been minimized to a width of 0

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The Lenis smooth scrolling feature (GSAP) is not functioning properly

Enhancing the functionality of a bootstrap button with the addition of an

Unexpected behavior observed with LitHTML when binding value to input type range

Acquiring the Facebook profile_id and incorporating it into a URL using a Chrome Extension

angular and node: troubleshooting the $http.get error

Conflict with choosing options identified when using Select Box on IOS iPad mini

Unable to display divs in a stacked format using Bootstrap 5

Troubleshooting Issue with Jquery AJAX Loading

Can you explain the variance in these code snippets when implementing React's setState() function?

Dynamically load content onto a jQuery Mobile page upon clicking a link

Using the useState hook in a loop can sometimes result in a unique key error

What is the best way to share both text and an image URL in a single tweet through the Twitter API

The challenge of populating information within a Datalist

The jQuery function that clears the form data

Locate the unique symbol within an array

Use JSON data to populate a dynamic bar chart in Highcharts

"Discover the method for tallying the quantity of radio buttons based on their names within AngularJS

Is it possible to leverage Create-React-App's npm start in conjunction with Node.js?

Issue: Troubleshooting data serialization process using getStaticProps in Next.js

Discrepancy in CSS rendering in Chrome and Firefox