CODEWITHSUNDEEP
jquery
Pawan
Pawan

Reputation: 32341

How to make same HTML section open in one div and close in another div

I have this HTML using Jquery 

<html>
  <head>
  <script type="text/javascript" src="js/accordian/jquery-1.9.1.js">
  </script>
  <script type="text/javascript">


$(document).on("click", ".checkboxclas", function(e) {
   $(".Topping-details").hide();
  var divdata = $("div.activateUiHTML").html();
   $("#ordersdiv").prepend(divdata);
  });


 </script>
</head>

<body>
   <div  class="activateUiHTML"  data-role="collapsible">
   <div class="prd-items-detials">
      <form><input type="checkbox" class="checkboxclas" name="checkbox-mini-0" id="59" > 
         <label class="testtt" for="checkbox-mini-0">Ice Cream Butter Scotch</label> 
      </form>
      <div class="Topping-details" id="59">
         <section id="topping_tsection_59">
            <i id="topping-close"></i>
            <aside>
               <section class="secclass"><a href="#">Honey with Chocolate Sauce  10 ML</a></section>
            </aside>
         </section>
      </div>
   </div>
   </div>
   <div id="ordersdiv"></div>
</body>

</html>

When clicked on the CheckBox , i have a listener in which i am appending data to the div called ordersdiv

I am struck at one place .

When i click on the checkbox , i want to hide the html present inside Topping-details class when it is added to the ordersdiv and it must not be closed under activateUiHTML div

Right now when i used $(".Topping-details").hide(); it is being hiding in both the div's .

could anybody please help me how to reslve this ??

Upvotes: 0

Views: 384

Answers (2)

Shaunak D
Shaunak D

Reputation: 20646

Working Demo

You need a different selector to hide .Topping-details inside #ordersdiv

Use $("#ordersdiv .Topping-details").hide(); after you append the html.

Try this,

$(document).on("click", ".checkboxclas", function(e) {


    var divdata = $("div.activateUiHTML").html();


    $("#ordersdiv").prepend(divdata);
    $("#ordersdiv .Topping-details").hide();

});

Note :

Your html append is generating duplicated ID checkboxes.

Upvotes: 1

David
David

Reputation: 219117

If I understand correctly, you only want to hide the "Topping-details" divs which are children of the "ordersdiv" div? If so, you can simply use both of those in the selector:

$("#ordersdiv .Topping-details").hide();

This will hide only the elements with class "Topping-details" only if they are also child elements of the "ordersdiv" element.

Upvotes: 1

Related Questions