The function of slidetoggle is malfunctioning when clicked

Question

The function of slidetoggle is malfunctioning when clicked

I currently have two dynamic containers with one displaying grouped boxes, quantities, and totals, while the other shows detailed information.

Both container values are added dynamically at runtime. By default, the grouping container is displayed on the page.

The values are fetched using jQuery to showcase them in a "preview" table located outside the div containers.

I am attempting to utilize slidetoggle functionality to switch between the containers upon clicking a link, which works smoothly. However, I am encountering issues with the table as the values appear incorrect initially and upon subsequent clicks of the link.

For reference, you can view my current jQuery script here: [My jsfiddle][1]

Below is the test markup:

<div class="ToogleGroupContainer">
<div class="shipToSingleSection">
    <div class="shoppingCart_Category">
        <div class="shoppingCart_Box">Box#01</div>
        <div class="shoppingCart_qtyArea">
            <div class="shoppingCart_qtyLabel">QTY</div>
            <div class="shoppingCart_qty-select">5</div>
        </div>
        <div class="shoppingCart_Price_Each">Each 26.99</div>
        <div class="shoppingCart_SubTotal_Each">Price 134.95</div>                
    </div>
    <hr />
</div>
<div class="shipToMultipleSection" style="display:none;">
    <div class="shoppingCart_Category">
        <div class="shoppingCart_Box">Box#01</div>
        <div class="shoppingCart_qtyArea">
            <div class="shoppingCart_qtyLabel">QTY</div>
            <div class="shoppingCart_qty-select">1</div>
            <div class="shoppingCart_qty-select">1</div>
            <div class="shoppingCart_qty-select">1</div>
            <div class="shoppingCart_qty-select">1</div>
            <div class="shoppingCart_qty-select">1</div>
        </div>
        <div class="shoppingCart_Price_Each">Each 26.99</div>
        <div class="shoppingCart_SubTotal_Each">Price 26.99</div>

    </div>
    <hr />
</div>
</div>
<table class="tableOrderPreviewTotals" border=1>
<tr>
    <td class="yord_hdr">Item</td>
    <td class="yord_hdr_center">QTY</td>
    <td class="yord_hdr_center">Each</td>
    <td class="yord_hdr_center">Price</td>
</tr>
<tr>
    <td class="yord_line_item" stlye="display:none;">
        <div id="itemOrderPreview"></div></td>
    <td class="yord_line_qty" stlye="display:none;">
        <div id="qtyOrderPreview"></div></td>
    <td class="yord_line_right" stlye="display:none;">
        <div id="priceEachOrderPreview"></div>
    </td>
    <td class="yord_line_right" stlye="display:none;">
        <div id="subtotalEachOrderPreview"></div>
    </td>   
</tr>
</table>

<br/>
<a href="" class="shipToMultipleLink">Ship Order to Multiple Addresses</a>

It's apparent that there are inconsistencies in the data presentation. The goal is to show values accurately based on which container is active on the page.

The desired default display should be:

Item QTY Each Price

Box#1 5 26.99 134.95

Once the "Ship to multiple addresses" link is clicked (toggled), the table lines should adjust accordingly:

Item QTY Each Price

Box#1 1 26.99 26.99

Upon toggling back to the "Ship to single address" mode, the table line should revert to the default display:

Item QTY Each Price

Box#1 5 26.99 134.95

Any assistance provided will be highly appreciated!

Thank you for your help.

javascript jquery css

Answer 1

Answer №1

give it a shot

  $(document).ready(function () {
        $('.shipToMultipleLink').click(function () {
            $('.shipToMultipleSection, .shipToSingleSection').slideToggle('fast');
            return false;

        });

            $.each($('.shipToMultipleSection .shoppingCart_qty-select'), function () {
                $("#itemOrderPreview").append($(".shoppingCart_Box").html()).append("<br>")
                $("#qtyOrderPreview").append($(this).html()).append("<br>");

                var each = $('.shoppingCart_Price_Each').html().replace(/Each/,"")
                $("#priceEachOrderPreview").append(each).append("<br>");

                var price = +each * $(this).text()
                 $("#subtotalEachOrderPreview").append(price).append("<br>");
            });

      var h = '<tr class="singleLine" style="display:none;">'
      /* edited */
      h += '<td>' + $(".shoppingCart_Box").html() + '</td>'
      h += '<td>' + $(".shoppingCart_qty-select").html() + '</td>'
      h += '<td>' + $('.shoppingCart_Price_Each').html().replace(/Each/,"") + '</td>'
      h += '<td>' + $('.shoppingCart_SubTotal_Each').html().replace(/Price/,"") + '</td>' 
      h += '</tr>'
      $(".tableOrderPreviewTotals tr:last-child").after(h)

    });

jsfiddle: http://jsfiddle.net/alemarch/k3t0cbcc/4/ is this what you're looking for?

Answer 2

give it a shot

  $(document).ready(function () {
        $('.shipToMultipleLink').click(function () {
            $('.shipToMultipleSection, .shipToSingleSection').slideToggle('fast');
            return false;

        });

            $.each($('.shipToMultipleSection .shoppingCart_qty-select'), function () {
                $("#itemOrderPreview").append($(".shoppingCart_Box").html()).append("<br>")
                $("#qtyOrderPreview").append($(this).html()).append("<br>");

                var each = $('.shoppingCart_Price_Each').html().replace(/Each/,"")
                $("#priceEachOrderPreview").append(each).append("<br>");

                var price = +each * $(this).text()
                 $("#subtotalEachOrderPreview").append(price).append("<br>");
            });

      var h = '<tr class="singleLine" style="display:none;">'
      /* edited */
      h += '<td>' + $(".shoppingCart_Box").html() + '</td>'
      h += '<td>' + $(".shoppingCart_qty-select").html() + '</td>'
      h += '<td>' + $('.shoppingCart_Price_Each').html().replace(/Each/,"") + '</td>'
      h += '<td>' + $('.shoppingCart_SubTotal_Each').html().replace(/Price/,"") + '</td>' 
      h += '</tr>'
      $(".tableOrderPreviewTotals tr:last-child").after(h)

    });

jsfiddle: http://jsfiddle.net/alemarch/k3t0cbcc/4/ is this what you're looking for?

Answer 3

Answer №2

Wow, things are a bit messy here..

Let's start by troubleshooting your jQuery code:

 $('shipToMultipleLink').hide();
 $('shipToSingleLink').show();

This should be corrected to:

 $('.shipToMultipleLink').hide();
 $('.shipToSingleLink').show();

After fixing that, make sure to tidy up the rest of your code and provide a clearer explanation of your issue so we can assist you better.

Answer 4

Wow, things are a bit messy here..

Let's start by troubleshooting your jQuery code:

 $('shipToMultipleLink').hide();
 $('shipToSingleLink').show();

This should be corrected to:

 $('.shipToMultipleLink').hide();
 $('.shipToSingleLink').show();

After fixing that, make sure to tidy up the rest of your code and provide a clearer explanation of your issue so we can assist you better.

The function of slidetoggle is malfunctioning when clicked

Answer №1

Answer №2

Similar questions

Displaying search results seamlessly on the same page without any need for reloading

Issue with Cascading Dropdowns in jQuery

Display a list with a set limit and an option to show more by clicking

JQuery script showing no signs of functioning, even though it runs smoothly in the console

Animating SVG while scrolling on a one-page website

unable to reset contact form functionality

Here's a guide on using a button to toggle the display of password value in Angular, allowing users to easily hide

What is the best way to customize the appearance of chosen selections in the MUI Autocomplete component?

Combining Turn.js with AJAX for an interactive web experience

The issue with Multiselect arises when the array is being set up initially

Icon for local system displayed on browser tab

Strategies for resolving type issues in NextJs with Typescript

Node.js and the Eternal Duo: Forever and Forever-Montior

The Facebook JS SDK is causing an XSS error and returning a "user_denied" response, even though the Auth Popup for FB.Login is not being

Issue with popup display in React Big Calendar

Utilizing Express 4, create a fresh route within an app.use middleware

I encountered an error while trying to deploy my next.js project on Vercel - it seems that the module 'react-icons/Fa' cannot be found, along with

Why is it that one of my useQuery hooks is returning a value while the other one is returning undefined?

Angular - a simple method to determine the number of non-empty inputs in a complex template-driven form

Tips for expanding the content of a blogger page to fill the entire frame of the page