Struggling to successfully toggle the visibility of items

I am currently facing an issue with displaying different sets of data based on button clicks. The first block of information is showing correctly upon page load, but when I try to display other blocks by clicking on the corresponding buttons, the info container disappears and nothing gets displayed. There are no errors in the console, and I'm having difficulty figuring out what exactly I might be doing wrong.

Could someone possibly point out any oversight on my part?

$( document ).ready(function() {
     $('.big-three-names').click(function() {
         var i = $( this ).html();
         $('.big-three-info').css("display", "none")
         $('.big-three-info').eq(i-1).css("display", "block");
     });

     $('.big-three-info').eq(0).css("display", "block");
});
.big-three-out {
background-color: #CCC;
width: 100%;
margin: auto 0;
/*padding: 15px 0;*/
}
.big-three {
margin: 75px 7.5% 25px 7.5%;
height: 900px;
border: 1px solid black;
}
#big-three-title {
text-align: center;
font-size: 1.6em;
padding: 50px 0 30px 0;
}
#big-three-description {
text-align: center;
font-size: 1.3em;
}
#big-three-names-out {
width: 100%;
height: 75px;
margin: 50px 0;
}
.big-three-names {
display: inline-block;
border: 2px solid #FFF;
width: 33.05%;
height: 100%;
text-align: center;
font-size: 1.5em;
font-weight: bold;
background-color: #000;
color: #FFF;
cursor: pointer;
}
.big-three-names:hover {
background-color: blue;
color: #FFF;
}
.big-three-info {
margin: 50px 20%;
border: 1px solid black;
height: 550px;
  display: none;
}
#big-three-info-title { 
width: 100%;
margin: 100px 0 25px 50px;
font-size: 1.2em;
}
#big-three-info-description { 
width: 100%;
margin-left: 50px;
font-size: 1em;
}
.show{
  display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="big-three-out">
    <div class="big-three">
        <div id="big-three-title">The Big three</div>
        <div id="big-three-description">Description.</div>
        <div id="big-three-names-out">
            <div class="big-three-names">A</div>
            <div class="big-three-names">B</div>
            <div class="big-three-names">C</div>
            <div class="big-three-info one-sub">
                <div id="big-three-info-title">
                    A
                </div>
                <div id="big-three-info-description">
                    fdfdfsaf
                </div>
            </div>
            <div class="big-three-info two-sub">
                <div id="big-three-info-title">
                    B
                </div>
                <div id="big-three-info-description">
                    fdfafa
                </div>
            </div>
            <div class="big-three-info three-sub">
                <div id="big-three-info-title">
                    C
                </div>
                <div id="big-three-info-description">
                    fdsfsdfaf
                </div>
            </div>
        </div>
    </div>
</div>

javascriptjqueryhtmlcss

Answer №1

Your hide/show method should focus on utilizing the index of an element rather than directly referencing its HTML structure.

Here's a better approach:

$( document ).ready(function() {
  $('.big-three-names').click(function() {
    var i = $( this ).index();
    $('.big-three-info').fadeOut()  
    $('.big-three-info').eq(i).fadeIn(); 
  });
  $('.big-three-info').eq(0).css("display", "block");
});
.big-three-out {
background-color: #CCC;
width: 100%;
margin: auto 0;
/*padding: 15px 0;*/
}
.big-three {
margin: 75px 7.5% 25px 7.5%;
height: 900px;
border: 1px solid black;
}
#big-three-title {
text-align: center;
font-size: 1.6em;
padding: 50px 0 30px 0;
}
#big-three-description {
text-align: center;
font-size: 1.3em;
}
#big-three-names-out {
width: 100%;
height: 75px;
margin: 50px 0;
}
.big-three-names {
display: inline-block;
border: 2px solid #FFF;
width: 33.05%;
height: 100%;
text-align: center;
font-size: 1.5em;
font-weight: bold;
background-color: #000;
color: #FFF;
cursor: pointer;
}
.big-three-names:hover {
background-color: blue;
color: #FFF;
}
.big-three-info {
margin: 50px 20%;
border: 1px solid black;
height: 550px;
  display: none;
}
#big-three-info-title { 
width: 100%;
margin: 100px 0 25px 50px;
font-size: 1.2em;
}
#big-three-info-description { 
width: 100%;
margin-left: 50px;
font-size: 1em;
}
.show{
  display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="big-three-out">
    <div class="big-three">
        <div id="big-three-title">The Big three</div>
        <div id="big-three-description">Description.</div>
        <div id="big-three-names-out">
            <div class="big-three-names">A</div>
            <div class="big-three-names">B</div>
            <div class="big-three-names">C</div>
            <div class="big-three-info one-sub">
                <div id="big-three-info-title">
                    A
                </div>
                <div id="big-three-info-description">
                    fdfdfsaf
                </div>
            </div>
            <div class="big-three-info two-sub">
                <div id="big-three-info-title">
                    B
                </div>
                <div id="big-three-info-description">
                    fdfafa
                </div>
            </div>
            <div class="big-three-info three-sub">
                <div id="big-three-info-title">
                    C
                </div>
                <div id="big-three-info-description">
                    fdsfsdfaf
                </div>
            </div>
        </div>
    </div>
</div>

Answer №2

Consider using .index() instead of .html(), and omit the -1 from the .eq() function call.

$( document ).ready(function() {
     $('.big-three-names').click(function() {
         var index = $( this ).index();
         $('.big-three-info').css("display", "none")
         .eq(index).css("display", "block");
     });

     $('.big-three-info').eq(0).css("display", "block");
});
.big-three-out {
background-color: #CCC;
width: 100%;
margin: auto 0;
/*padding: 15px 0;*/
}
.big-three {
margin: 75px 7.5% 25px 7.5%;
height: 900px;
border: 1px solid black;
}
#big-three-title {
text-align: center;
font-size: 1.6em;
padding: 50px 0 30px 0;
}
#big-three-description {
text-align: center;
font-size: 1.3em;
}
#big-three-names-out {
width: 100%;
height: 75px;
margin: 50px 0;
}
.big-three-names {
display: inline-block;
border: 2px solid #FFF;
width: 33.05%;
height: 100%;
text-align: center;
font-size: 1.5em;
font-weight: bold;
background-color: #000;
color: #FFF;
cursor: pointer;
}
.big-three-names:hover {
background-color: blue;
color: #FFF;
}
.big-three-info {
margin: 50px 20%;
border: 1px solid black;
height: 550px;
  display: none;
}
#big-three-info-title { 
width: 100%;
margin: 100px 0 25px 50px;
font-size: 1.2em;
}
#big-three-info-description { 
width: 100%;
margin-left: 50px;
font-size: 1em;
}
.show{
  display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="big-three-out">
    <div class="big-three">
        <div id="big-three-title">The Big three</div>
        <div id="big-three-description">Description.</div>
        <div id="big-three-names-out">
            <div class="big-three-names">A</div>
            <div class="big-three-names">B</div>
            <div class="big-three-names">C</div>
            <div class="big-three-info one-sub">
                <div id="big-three-info-title">
                    A
                </div>
                <div id="big-three-info-description">
                    fdfdfsaf
                </div>
            </div>
            <div class="big-three-info two-sub">
                <div id="big-three-info-title">
                    B
                </div>
                <div id="big-three-info-description">
                    fdfafa
                </div>
            </div>
            <div class="big-three-info three-sub">
                <div id="big-three-info-title">
                    C
                </div>
                <div id="big-three-info-description">
                    fdsfsdfaf
                </div>
            </div>
        </div>
    </div>
</div>

Answer №3

View Live Demo

Feel free to explore the interactive demonstration above.

$('.category-buttons').click(function() {


   $(".category-info").hide();
   $("."+$(this).attr("class").split(" ")[1]+"-content").show();



    });


  $(document).ready(function(){

  $(".default-content").show()


  })

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

What is the process of querying both a collection and a subcollection in Firebase using AngularFire?

I have a structure in my firebase database that looks like this: /profiles/{uid}/displayName /email /otherAttribues /roles/{roleName}/someAttribute /someOtherAttribute The reason ...

javascriptangularfirebasegoogle-cloud-firestoreangularfire2

The JavaScript Autocomplete feature fails to clear suggestions when there is no user input detected

After watching a tutorial on using Javascript with Autocomplete and a JSON file, I implemented the code successfully. However, I encountered an issue: When I clear the input field, all results from the file are displayed. I've tried adding code to cl ...

javascriptjsonautocomplete

Ready document not triggering at the anticipated time

I've developed a website where all the pages are loaded using ajax. When I load the first page, I check if jQuery is loaded by using: if (window.jQuery) { alert('jQuery is loaded'); } Every time this script runs, it successfully alert ...

jqueryajax

Validation of phone numbers based on country codes

How can I validate phone numbers based on the selected country in Angular? Are there any Angular packages specifically for this task? I've attempted to use regex, but it only works for certain countries. I need a solution that can validate mobile an ...

javascriptangularjsvalidationpackage

Retrieving form data using query parameters in Flask

Here's my initial question, so please let me know if I've overlooked anything ;) I'm in the process of developing a website that will execute Python code to solve a specific problem and display the outcomes as numerical values and a plot on ...

jquerypythonajaxflaskmpld3

Align the content of the list items to the center and position the list in the center of

I am struggling to get the List centered beneath "Contact Me" and the hr tag. Both of those elements are perfectly centered in the column, but the list and icons are aligned to the left. Ideally, I would like them to be in the center like everything else. ...

cssreactjslistmaterial-uilistitem

The subfolder and HTML page have identical names and are not functioning properly

I recently updated my webpage by removing the .html extensions using htaccess. My website includes a page named "blog.html" and a subfolder called "blog" with additional html pages inside. RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^ ...

html.htaccessurlmod-rewritesubdirectory

Is there a way to specifically target the MUI paper component within the select style without relying on the SX props?

I have been experimenting with styling the Select MUI component using the styled function. I am looking to create a reusable style and move away from using sx. Despite trying various methods, I am struggling to identify the correct class in order to direct ...

csstypescriptmaterial-ui

Utilizing the onclick event to call a function with multiple arguments within Template literals

How can I properly write a function with multiple arguments using JavaScript post ES6 template literals when called by an onclick event? Here is my code: function displayImg(imageUrl, gameName, gameSummary, gameYear, cardId) { cardId = cardId.toStrin ...

javascriptnode.jstemplatesonclicktemplate-literals

What could be causing my ajax file uploader to malfunction?

I am currently working on building an AJAX file upload module. Below is a snippet of the code I have been using: //creating a form for uploading files via AJAX FileUploader.prototype.createForm = function() { // creating a new form var form = docu ...

javascriptajaxdomfile-upload

Finding a jQuery DOM element without using a loop

Can the element in variable d be identified directly instead of looping through each function? Take a look at the DOM below: <!DOCTYPE html> <html lang="en"> <head> <title></title> <script src="../jquery-ui ...

jqueryhtmlcss

The npm outdated command seems to ignore the caret notation specified in the package.json file

When looking at a package.json file that contains the following: "devDependencies": { "grunt": "^0.4.5", "grunt-concurrent": "^1.0.0", "grunt-contrib-jshint": "^0.10.0", "grunt-contrib-watch": "^0.6.1", "grunt-dev-update": "^1.1.0", ...

javascriptnode.jsnpmpackage.json

Declaring module public type definitions for NPM in Typescript: A comprehensive guide

I have recently developed a npm package called observe-object-path, which can be found on GitHub at https://github.com/d6u/observe-object-path. This package is written in Typescript and has a build step that compiles it down to ES5 for compatibility with ...

javascripttypescriptnpm

Retrieve a single document from Firestore and assign it to a variable

While I'm still new to NodeJS, I'm currently working on retrieving a single User document from Firestore. const fs = firebase.firestore(); const usersRef = fs.collection('users'); let findUserByContact = (contact) => { let res ...

javascriptnode.jsfirebasegoogle-cloud-firestore

"Using a WMD Editor to show the content of the wmd-preview division and questions on how to save this content in a

I am currently in the process of integrating the WMD editor into my website. Everything seems to be functioning correctly so far, but I have hit a roadblock: How can I store the entered information in my database? I have developed a JS/Ajax function that a ...

phpjavascriptjqueryajax

Tips on updating the content of an HTML element dynamically when it is already being populated using *ngFor

I have created an HTML component that utilizes *ngFor to dynamically generate HTML elements. This results in a total of 3 tags being generated when the code is run. I have included data such as subject in the component file which updates dynamically, how ...

htmlangulartypescripthttpclient

When you hover, there is no writing cursor in sight

I'm looking for a way to display a label on an input field and have a writing cursor show up when hovering over the label. I am not interested in using a placeholder label. Do you have any simple solutions for this? See the code snippet below: JSFiddl ...

htmlcss

What is the best way to display Bootstrap dynamic tabs in a single row without them overflowing and requiring a scroll button to access all the tabs

Is there a way to dynamically display Bootstrap tabs? I want the content in the tab to show when the link is clicked, and also have a close button. I need the tabs to be aligned in a single row without wrapping down if they don't fit. Here's an ...

jquerycsstwitter-bootstrap

Managing data in React and JavaScript: Clearing fields upon successful sign up and redirecting to login page after receiving a 200 status code

Here is the code for my SignUp react function. After receiving a response of 200 upon clicking the Sign up button, I want to clear the text in all three fields and redirect the user back to the login page. I'm new to web development so any assistance ...

javascriptreactjsmaterial-ui

Dynamic graphic with integrated navigation menu

I'm looking to achieve a similar design concept like the one on this website: The navigation bar should remain fixed at the bottom of the window until you start scrolling. I am unsure if this can be done using just CSS, but I have made some progress ...

jqueryhtmlcss