What causes the sudden disappearance of all information when I simply press a button?

I am currently working on a website that allows users to switch between languages, specifically Polish and English. All text on the website changes languages accordingly. However, I have encountered an issue with the menu functionality. The menu consists of anchors that scroll down to specific sections when clicked. The problem arises when the language is set to Polish, as it causes everything to disappear, but works fine when set to English.

<div id="en" class="menu">
        <h1>kaszam.ga</h1>
        <p id="dateCountEn"></p>
        <ul>
            <li><a href="#aboutMe">about me</a></li>
            <li><a href="#pcSpecs">pc specs</a></li>
            <li><a href="#accounts">accounts</a></li>
            <li><a href="#usefulLinks">useful links</a></li>
        </ul>
    </div>

    <div id="pl" class="menu">
        <h1>kaszam.ga</h1>
        <p id="dateCountPl"></p>
        <ul>
            <li><a href="#aboutMe">o mnie</a></li>
            <li><a href="#pcSpecs">specyfikacje kompa</a></li>
            <li><a href="#accounts">konta</a></li>
            <li><a href="#usefulLinks">przydatne linki</a></li>
        </ul>
    </div>

<div class="spacer2" id="aboutMe"></div>

    <section>
        <div id="en">
            <h1>About me</h1>
            <p>My name is Maksym Kasza</p>
            <p>I was born on 23rd November 2001 (23/11/2001) in Poland</p>
            <p id="ageEn"></p>
            <p>I've been living in England since 2008</p>
            <p>I can speak 2 languages fluently</p>
            <p>This website was created by me</p>
        </div>
        <div id="pl">
            <h1>O mnie</h1>
            <p>Nazywam się Maksym Kasza</p>
            <p>Urodziłem się 23 listopada 2001 (23.11.2001) w Polsce</p>
            <p id="agePl"></p>
            <p>Mieszkam w Anglii od 2008 roku</p>
            <p>Potrafię płynnie mówić w 2-óch językach</p>
            <p>Ta strona została stworzona przeze mnie</p>
        </div>
    </section>

Answer №1

The reason for the behavior you're experiencing is due to the click listener on the polish links:

<body class="en">

$("#pl").click(function(){
    $(".en").hide();
    $(".pl").show();
}); 

Since your body has the class "en", clicking on a polish link will hide the entire body.

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

Tips for Positioning Sidebar Elements Relative to Content IDs

My goal is to have sidebar elements align with specific id tags in the main content, rather than just stacking up one after another. I want the sidebar elements to align with certain id tags mentioned in the main post content. The image at shows the basic ...

Tips for accessing jQuery elements following declaration

Using jQuery, I have created a Tr element like this: var elemTr = $("<tr>", { }); var elemEmpName = $("<div>", { }).data('otherDtls', { recordId: 10 });; Next, I appended elemEmpName to elemTr like so: elemTr.append(jQue ...

troubles with compatibility between bootstrap.css and IE11

I am currently developing a web application using AngularJS and bootstrap.css. While everything appears fine on Chrome, I am facing some formatting issues on both Firefox and IE11. HEAD <head> <meta charset="utf-8"> <meta http-equi ...

Styling Images Inside a DIV Container Using CSS Float

Considering that I have 2 divs with images and text, I encountered some formatting issues when attempting to float the image to the left using float:left;. The strange formatting is ruining the layout. Below, I've included my code snippet along with a ...

Efficiently adapting html content for Vue localization

I've been utilizing the v-html tag to display HTML in my Vue pages. However, I came across a string that was a complete HTML file with content like this: <html xmlns="https://www.w3.org/1999/xhtml"> <head> .... <style> < ...

Can CSS be used for creating unique color combinations?

I am facing a challenge where I have two div elements with different transparent, colored backgrounds that overlap each other. My goal is to find a way to customize the color in the area where these elements overlap. For instance, if I blend red and blue ...

Simultaneous malfunction of two ajax forms

I have a dilemma with two boxes: one is called "min amount" and the other is called "max amount." Currently, if I input 100 in the max amount box, it will display products that are priced at less than $100. However, when I input an amount like $50 in the m ...

The popover box adjusts its width to fit the contents in Chrome, however, it does not do so in

Having issues with the container width in Edge compared to Chrome despite the Sass code working fine in Chrome. Here's the code: .popover { font-family: 'Tahoma', sans-serif; max-width: 100%; box-shadow: 0 0 15px 6px #646262; ...

Implementing jQuery to assign values in a Vue.js form

I am facing a dilemma with a large form on an external website that has been developed with Vue.js. Unfortunately, I do not have access to the source code of this website. I am attempting to efficiently update this form in bulk using the browser console. D ...

Tips for making an input field that overlays text

I am currently working on a project that involves creating multiple cards using Bootstrap. Each card consists of a header, body, and footer. When a card is clicked on, I want an input field to appear in the header, footer, and body sections, overlaying the ...

A variant of setTimeout designed specifically for family members

I am currently working on a program that involves creating a "health" variable which decreases by random amounts at random intervals. This means that a player may encounter scenarios like the following: 5 seconds Lose 20 health 3 more seconds Lose 25 healt ...

Tips for entering text into the redactor editor with selenium IDE

The redactor editor's HTML structure is as follows: <div class="redactor_text redactor_optional redactor_editor" contenteditable="true" dir="ltr" style="height: 373px;"> <p>dummy text​</p> //This is where the text inputted into ...

What is the best way to align an element next to another using id or class?

I am looking to align the search element next to either "Media Heading 1" or "Media Heading 2" based on their id/class. For instance: Assume I have an element with the class of "media-item-1" and I aim to position the search div alongside that element us ...

Is there a way to redirect links within an iframe when a user decides to open them in a new tab?

I am currently developing a web application that allows users to access multiple services, such as Spark and others. When a user selects a service, like Spark for example, the app will open a new tab displaying my page (service.html) with user information ...

What is the best way to apply CSS to a mat-row element only when it is being hovered over?

I have a table with rows where a specific condition triggers a light red background color for each row. On hover, the background changes to light gray for all rows. However, I need the special rows (already colored light red) to have a deeper shade of red ...

Focus on targeting dynamic IDs such as #event_rules_attributes_0_interval, #event_rules_attributes_1_interval, etc. using CSS3 styling

Styling input tags using their IDs can be very convenient due to the higher precedence weight they hold compared to classes. For instance, I set a default width for input.text elements within a specific container: .details .metadata input.text { width: 2 ...

Utilizing PHP and AJAX to Extract Information from a MySQL Database

My goal is to fetch data from a MySQL database hosted on a webserver and display it in an HTML table. I've been following an example on W3Schools, but I'm facing issues retrieving the data successfully. Here is the source code: (HTML) <html& ...

Develop a C# plugin for Microsoft Dynamics CRM incorporating the use of Jquery and Ajax functionalities

Here is a demonstration of my jQuery code with Ajax: JQuery and Ajax Code https://i.sstatic.net/uZQW8.png In this code snippet, I am fetching field values and POSTing them to a URL in JSON format. Now, I want to achieve the same functionality in a C# pl ...

Link together a series of AJAX requests with intervals and share data between them

I am currently developing a method to execute a series of 3 ajax calls for each variable in an array of data with a delay between each call. After referring to this response, I am attempting to modify the code to achieve the following: Introduce a del ...

The pre-line white-space property is not functioning as anticipated in my CSS code

content: string; this.content = "There was an issue processing your request. Please try using the browser back button."; .content{ white-space: pre-line; } <div class="card-body text-center"> <span class="content"> {{ content }} </span& ...