Difficulty switching back and forth between three varying heights

I have a container with a button labeled "Show more". Upon clicking the button, the height of the container will transition through 3 different states.

 <div class="segment-suggestion-content height-small">


    <div class="segment-suggestion-show-more">
       <button type="button" class="btn">Show More</button>
     </div>
</div>

Initially, the container has the class .height-small with a height of 200px. When the "show more" button is clicked, the .height-small class will be removed and replaced with .height-mid, which has a height of 400px. Subsequently, clicking on 'show more' once again will remove the .height-mid class and add .height-full. Clicking 'show more' for the final time will change the container back to .height-small.

Although I am not proficient in jQuery, I attempted the code below, but it isn't functioning correctly. I'm uncertain as to what the issue might be.

   $('.segment-suggestion-show-more .btn').click(function(){

    if($(".segment-suggestion-content").hasClass('height-small'))
{
    $(".segment-suggestion-content").removeClass('height-small');
    $(".segment-suggestion-content").addClass('height-md');
}

     if($(".segment-suggestion-content").hasClass('height-md'))
{
$(".segment-suggestion-content").removeClass('height-md');
$(".segment-suggestion-content").addClass('height-full');
}

     if($(".segment-suggestion-content").hasClass('height-full'))
{
$(".segment-suggestion-content").removeClass('height-full');
$(".segment-suggestion-content").addClass('height-small');

}
});

Any assistance would be highly appreciated.

FIDDLE

javascriptjquerycss

Answer №1

This revised code now functions correctly:

$('.segment-suggetion-show-more .btn').click(function () {

    if ($(".segment-suggetion-content").hasClass('height-small')) {
        $(".segment-suggetion-content").removeClass('height-small');
        $(".segment-suggetion-content").addClass('height-mid');
    }

    else if ($(".segment-suggetion-content").hasClass('height-mid')) {
        $(".segment-suggetion-content").removeClass('height-mid');
        $(".segment-suggetion-content").addClass('height-full');
    }

    else if ($(".segment-suggetion-content").hasClass('height-full')) {
        $(".segment-suggetion-content").removeClass('height-full');
        $(".segment-suggetion-content").addClass('height-small');

    }
});

http://jsfiddle.net/3w5t2kp5/4/

The 2 issues resolved were:

  • You had written height-md instead of height-mid in your script
  • The height of .height-full was set to auto, resulting in a height of 0 when there is no content

Answer №2

Here is the solution: DEMO

$('.btn').click(function(){
    
    if($(".segment-suggetion-content").hasClass('height-small'))
    {
        $(".segment-suggetion-content").removeClass('height-small');
        $(".segment-suggetion-content").addClass('height-mid');
    }
     
    else if($(".segment-suggetion-content").hasClass('height-mid'))
    {
        $(".segment-suggetion-content").removeClass('height-mid');
        $(".segment-suggetion-content").addClass('height-full');
    }
     
    else if($(".segment-suggetion-content").hasClass('height-full'))
    {
        $(".segment-suggetion-content").removeClass('height-full');
        $(".segment-suggetion-content").addClass('height-small');   
    }
});

THE ISSUE:

The first issue was with your CSS selectors, specifically 

.segment-suggetion-content.height-full
, which needed to be changed to just .height-full for correct application.

Another problem was inconsistency in naming between your CSS classes (.mid) and jQuery calls (.md).

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

Ways to adjust the dimensions of an SVG icon in a React application

Trying to figure out how to display an SVG icon and text on the same line in React and Next.js. After some research, I've managed to achieve it. However, I'm struggling to control the size of the SVG icon in relation to the text. Ideally, I want ...

cssreactjssvgnext.js

Error: The variable "Set" cannot be found in the react.js code, specifically in Safari browser

An issue has been identified in Safari where a ReferenceError is thrown: "Can't find variable: Set" when using react.js. This error occurs only in Safari, while all other browsers work perfectly fine. The error message points to the main.js file which ...

javascriptreactjs

Managing input/output requests on Amazon EC2 instances

Having mastered node, javascript, and other technologies the hard way, I am finally on the brink of releasing my debut web application. After signing up for Amazon Web Services and setting up a micro instance to take advantage of the first year's free ...

javascriptnode.jsamazon-web-servicesioamazon-ec2

Tips for uploading information to a web service

Issue Description:- I am attempting to access web services from a different domain (i.e. Systems are not locally connected) and encountering the following error: "Failed to load : Response for preflight is invalid (redirect)" var username = "<a href= ...

javascriptjqueryajaxsapui5

Design a clear button for MUI autocomplete feature

I'm currently working on a project where I need to implement a button that clears the MUI autocomplete value and removes the data from the UI. Although I've managed to delete the data from the UI with the code provided, the onChange value remain ...

javascriptreactjsreact-hooksmaterial-uiautocomplete

Dealing with errors when working with cross-domain JSONP requests in jQuery can be a

My attempts to capture a bad request error using my jquery code have been unsuccessful. $.get('http://example.com/', {}, function () {}, 'jsonp') .done(function () { // never fires }) .fail(function () { // never fires }) .a ...

javascriptjqueryajaxerror-handlingjsonp

Concealing Social Security Numbers using AngularJS

I am currently working on masking SSN numbers using AngularJS. Expected Outcome: Before applying mask (onFocus) After applying mask (onBlur) Users are only allowed to enter numbers, and the SSN formatting is handled by filters. Below is a sample of the ...

javascriptjqueryangularjs

Using jQuery, you can easily apply a new class to a div when it is

I'm currently facing an issue with adding a class of "active" to a div upon clicking it using jQuery. My goal is to apply the css class of active in order to give the button a distinct color (or the hover effect.) Unfortunately, I have been unsuccess ...

javascriptjquerycss

parsing an array using jQuery's getJSON

Finally got the simplified array to work, check it out below If you're still struggling with parsing a complicated array, you can refer to this link. TLDR: I need to extract and insert each heading from an array into a div using Jquery - getJSON, wi ...

jqueryajaxjsonarraysgetjson

Accessing information from a json response using an ajax request

Currently, I am making an ajax call to fetch the longitude and latitude based on a pin code. Here is how I approached it: $(document).ready(function () { $.ajax({ type: "GET", url: "http://maps.googleapis.com/ma ...

javascriptjqueryjsonajaxgoogle-maps

Javascript Pretty Print Format is producing inaccurate output

function displayData(info) { document.body.appendChild(document.createElement('pre')).innerHTML = info; } function searchInGitHub(str) { const http = new XMLHttpRequest(); http.open("GET", "https://api.github.com/search/reposi ...

javascriptjsonpretty-print

Concealing the path of a file input in CSS

Similar Question: How to Conceal Input File Path in HTML File Upload Hello there! I was wondering if it's feasible to conceal the input file path and only display the browse button? Thanks a lot! Lucas ...

cssinput-type-file

Troubleshooting problem with responsive image display and blurred effects

Initial problem I have a photo gallery on my website. When you click on a photo, you can view a larger preview. To cater to mobile users, I set the following CSS: .overview img { height: auto; width: 90%; } However, I am facing an issue where the hei ...

htmlcss

Incorporating Javascript into HTML

I have developed a script to randomly change the size of an element, but I am struggling to understand how to incorporate it using HTML or iframe code for randomization. <script type="text/javascript"> var banner1 = ["728", "90"]; var banne ...

javascriptjqueryajaxhtml

Conceal the vertical scrollbar while allowing horizontal scrolling to remain enabled

I'm attempting to create a layout with HTML/CSS where there is a div that can be scrolled vertically and horizontally, but I only want the horizontal scrollbar to be visible. The vertical scrolling should be done using the mouse wheel while the horizo ...

htmlcss

I'm interested in finding a data binding framework that connects the DOM, JavaScript, and server-side database in a three-way manner for use with AngularJS and

AngularJS enthusiasts often tout the framework's two-way data binding feature, which allows for seamless synchronization between DOM elements and JavaScript data. Currently, I am immersed in learning projects that involve integrating AngularJS with D ...

javascriptpythondjangoangularjsdata-binding

Identifying sluggish hardware or unresponsive browsers using JavaScript

My site features numerous CSS animations and transitions that run very slowly on specific browsers and older hardware. I want to avoid user-agent sniffing; is there a way to identify browsers or hardware configurations using JavaScript or a JS library, and ...

cssbrowserjavascript

The Bootstrap navigation menu fails to extend the parent div when toggled

When I toggle the button to show the menu on small screens, the menu overflows the parent div with id=contents instead of pushing it down. How can this issue be fixed? Here is the code: <body> <nav id="header" class="navbar navbar-default"& ...

javascriptjqueryhtmlcsstwitter-bootstrap

Search a database for a specific set of ObjectID using Mongoose

I'm currently developing an API using node.js, express, and mongoose. As I am still new to mongosse, I have been exploring different approaches to achieve what I need. In my database, I have two collections: users and expenses. Here's an exampl ...

javascriptnode.jsmongodbexpressmongoose

Issues with Twitter-Bootstrap Modal Functionality

After creating a modal dialogue: <a href="#myModal" role="button" class="btn" data-toggle="modal" id="LaunchDemo">Click here to launch the demo modal</a> <!-- Modal --> <div id="myModal" class="modal hide fade" tabindex="-1" role="di ...

javascriptjquerytwitter-bootstrapmodal-dialog