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

What is the best method for assigning real-life units, such as centimeters or millimeters, to a dimension

The building of the module was unsuccessful due to a failure in the babel-loader located in the webpack module of Nuxt

Combining user input with React's useState function

Running a child process within a React application

Guide on storing a promise response in an external object in VUE

What is the best way to incorporate text below grid columns in html?

The information submitted through the form is not displaying on the console after being gathered using the post method in Express

Activate a button by simulating a click event through a shortcut key with the help of a

Guide to: Implementing Radio Buttons to Adjust Image Opacity

Is it possible to use JavaScript to save and preserve the current state of a webpage?

What could be causing the malfunction of DirectionalLight in three.js?

The object NativeModules from the 'react-native' requirement is currently empty

Issue: Unable to utilize import statement outside a module as per the guidelines of the vue-test-utils official tutorial

Filtering a list in AngularJS based on a property of an object with a filter applied on it

How come characteristics of one particular div element are transferring to unrelated div elements?

The issue of drop shadows causing links to not work properly in Internet Explorer

Issues with implementing the Skeleton feature in the Alert module

Creating a unique tooltip component for ag-grid with the use of Material tooltips

Discover the inner workings of the code below: set a variable called "start" to the current time using the new Date().getTime() method. Create a loop that continuously checks if

Stopping React component click event from bubbling up to document