We Keep Coding

How to hide and show a text by hidden field in JQuery [duplicate]

This question already has answers here:
Using JQuery to toggle div visibility
(4 answers)
Closed 1 year ago.
Hi I want to hide and show a text Cod Shipping charge
`<div class="row">
<div class="cell" id="well">Cod Shipping charge</div>
<div class="cell free"><?php echo $priceCurrency->getCurrency()->getCurrencySymbol();?> <span class="text-shipping-charge"><?php echo number_format($shippingrate,2,'.',''); ?></span></div>
</div>`
when clicking on the payment below code
<div class="payment-option">
<div class="head" >Part Payment (COD + Online)</div>
<div class="content">
<div class="cod-block">
<div class="cash-option">
<div class="pay-option">
<div class="option-info">20% Online (Now)</div>
<div class="option-cash">₹ 12,650</div>
</div>
<div class="pay-option">
<div class="option-info">80% Cash On Delivery</div>
<div class="option-cash">₹ 50,000</div>
</div>
</div>
Please Help

You mention JQuery so using that it could be something like:
$('.payment-option').click(function(){
$('.row').show();
});
Though class .row doesn't sound very unique so you may want to assign that element a unique id like
<div id="cod_shipping_charge" class="row">
then you can use:
$('#cod_shipping_charge').show();

$(document).ready(function() {
$("#btnNewGroup").click(function() {
$("#newGroup").toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div>
<button id="btnNewGroup">New Group</button>
<div id="newGroup" style="display:none">Div Content</div>
</div>

How to grab value from ASTNode

I parsed an entire HTML page into an ASTNode.
Snippet of it looks like this:
<div id="buildings-wrapper">
<div id="building-info">
<h2><span class="field-content">Britney Spears' House</span></h2>
<div class="building-field">
<div class="field-content">9999 Hollywood Blvd</div>
</div>
<div class="building-field">
<div class="field-content">Building Hours: Mon. 07:00-23:00 Tue.-Fri. 06:30-22:00, Sat. 07:30-18:00, Sun. 12:00-18:00 Holidays - Closed</div>
</div>
<div class="building-field">
<div class="field-content">Locate on the stars map</div>
</div>
</div>
<div id="building-image">
<div class="field-content"><img src="../../../../ssc.adm.britneyspears.com/classroomservices/image/viewimage?userEvent=ShowBuildingImage&buildingID=britneyspears" alt="Image of BritneySpears"></div>
</div>
</div>
I need to grab some information from the page, like the name of the building and its address. How do I do that with an ASTNode? I've read the XML DOM tutorials and they suggest using document.getElementbyId and the ilk but I can't get to those functions from an ASTNode. I think I'm missing something simple but what's the easiest way to access the values I need?

Hide div if under ordered list with class

I am trying to hide a div that displays comment info if the comment is a child.
In the code below I am trying to make it so if "ol" has class of "children" then the div inside with the id "info" will be hidden.
Also open to other ways of hiding the div if the the comment is a child.
<ol class="children">
<li class="comment byuser comment-author-1 bypostauthor odd alt depth-2" id="comment-325" itemprop="review" itemscope itemtype="http://schema.org/Review">
<article id="comment-325" class="comment row">
<header class="comment-author vcard col-md-2 col-sm-3 col-xs-12">
<section class="comment-content comment col-md-10 col-sm-9 col-xs-12">
<div class="comment-meta"></div>
<div itemprop="reviewBody">
<div class='edit-comment-admin-links-no-icon ' id='edit-comment-user-link-325' style='background:none'>
<div style='display:none'>
<p>asdsadasdsadasasdasdas
<div id="info" class="cio-display cio-display-0">
<div class="cio-display-start-new-row"></div>
<div class="cio-label cio-label-service-provided">Service Inquired About:</div>
<div class="cio-field cio-field-service-provided">Buy/Sell Commercial</div>
<div class="cio-display-start-new-row"></div>
<div class="cio-label cio-label-deal-completed">Deal Completed?</div>
<div class="cio-field cio-field-deal-completed">Yes</div>
<div class="cio-display-start-new-row"></div>
<div class="cio-label cio-label-date-of-service">Date Of Service:</div>
<div class="cio-field cio-field-date-of-service">2015</div>
</div>
</div>
</div>
</div>
</section>
</header>
</article>
</li>
</ol>

Considering the code you posted, this is the CSS code that you need:
ol.children #info {
display: none;
}
However, assuming you have more than one of these comments, I have to add the following note:
Passing the same id to more than one element in your page is not a good idea. Ids should be unique identifiers of HTML elements. You should use a class for your purpose.
Now, assuming your to-be-hidden elements will always be wrapped in elements with itemprop="reviewBody", this is what you should use to hide them on ordered lists of comment that have the class children:
ol.children [itemprop="reviewBody"] {
display: none;
}
Here's the "cleaned up" version of your code:
<ol class="children">
<li class="comment byuser comment-author-1 bypostauthor odd alt depth-2" id="comment-325" itemprop="review" itemscope itemtype="http://schema.org/Review">
<article id="comment-325" class="comment row">
<header class="comment-author vcard col-md-2 col-sm-3 col-xs-12">
<section class="comment-content comment col-md-10 col-sm-9 col-xs-12">
<div class="comment-meta"></div>
<div itemprop="reviewBody">
<div class='edit-comment-admin-links-no-icon ' id='edit-comment-user-link-325' style='background:none'>
<div class="cio-display cio-display-0">
<div class="cio-display-start-new-row"></div>
<div class="cio-label cio-label-service-provided">Service Inquired About:</div>
<div class="cio-field cio-field-service-provided">Buy/Sell Commercial</div>
<div class="cio-display-start-new-row"></div>
<div class="cio-label cio-label-deal-completed">Deal Completed?</div>
<div class="cio-field cio-field-deal-completed">Yes</div>
<div class="cio-display-start-new-row"></div>
<div class="cio-label cio-label-date-of-service">Date Of Service:</div>
<div class="cio-field cio-field-date-of-service">2015</div>
</div>
</div>
</div>
</section>
</header>
</article>
</li>
</ol>
Please note that the above code will hide the review body section of all the comments in your list if the list has the class children, including the top level ones. If an ordered list has even one children, it will probably have the class children added to it by WordPress.
If you only want to hide the review body section on level 2 comments (or higher) but keep them visible on level 1 comments, and assuming these level 1 comments have the added class of level-1 (I'm guessing, since you didn't show us a level 1 comment) , this is the CSS you should use:
ol.children>li:not(.level-1) [itemprop="reviewBody"] {
display: none;
}

Try $('ol.children #info').hide();

Expounding from Kyle Emmanuel's answer, try to use this jQuery selector
$('ol.children div[id="info"]').hide();
Use the div[id="info"] selector if you're looking for divs with info as id. The #info selector will only return the first DOM element with info as ID, which should be fine anyway since you should only alot unique IDs to your elements.

How to calculate a transaction in ng-if and put a `<div>` only if the condition is true?

i want to add a row only if the x in $scope.grp leaves no remainder when divided by 3. I was trying the following code.
<div class="card">
<div ng-repeat="x in grp">
<div class="row">
<div ng-if="x%3==0">
<div class="row">
</div>
<div class="col col-33">
/my rest of code here/
</div>
</div>
</div>
<div>
any suggestions how to do it?

Not sure whether the following is correct or not. But a way to achieve it is as following.
<div data-ng-app="" data-ng-init="grp=['one','two','three','four','five','six','seven']" class="container">
<div ng-repeat="x in grp" ng-if="$index % 3 == 0" class="row">
<div class="col-xs-3">{{grp[$index]}}</div>
<div class="col-xs-3" ng-if="$index + 1 < grp.length">{{grp[$index+1]}}</div>
<div class="col-xs-3" ng-if="$index + 2 < grp.length">{{grp[$index+2]}}</div>
</div>
<div>
I am assuming grp is a string array and used $index to group.
Jsfiddle

Check this:
if reminder is 0, row will be added
<div class="card">
<div ng-repeat="x in grp">
<div class="row">
<div ng-if="x%3==0">
<div class="row">
reminder 0
</div>
</div>
<div class="col col-33">
my rest of code here
</div>
</div>
</div>
Here is the code for controller
function ctrl($scope){
$scope.grp=[1,2,3];
}
Codepen : http://codepen.io/anon/pen/eJJKwr

I'm not very familiar with angularjs - however your html struct is wrong in this case. Your struct will create an empty "row" column before every third div. I don't know if there is a way to just open a "div" tag in an ng-if and close it at a later point.
You should consider just creating array chunks for your cards. So each chunk will hold 3 cards and then you can loop over the first level of chunks, and then over the second level of your array. It will look something like that:
<div class="card">
<div ng-repeat="grp in chunks">
<div class="row">
<div ng-repeat"x in grp"> // as mentioned, I got no clue about angularjs, so I don't know how to correctly address the values within the groups
<div class="col col-33">
my rest of code here
</div>
</div>
</div>
</div>
</div>
As mentioned before I have no clue about angularjs itself, however you should be able to create chunks (split your array into smaller arrays) like:
var chunks=[[1,2,3],[4,5,6],[7,8,9]];

Toggle a repeated class in jQuery

I have this HTML code:
<div id="content">
<div class="profile_photo">
<img style="float:left;margin-right:7px;" src="http://gravatar.com/avatar/53566ac91a169b353a78b329bdd35c95?s=50&d=identicon" class="profile_img" alt="{username}"/>
</div>
<div class="container" id="status-#">
<div class="message">
<span class="username">{username} Debugr Rocks!
</div>
<div class="info">24-oct-2010, 14:05 GMT · Comment (5) · Flag · Via Twitter
</div>
<div class="comment_container">
<div class="profile_photo">
<img style="float:left;margin-right:7px;" src="http://gravatar.com/avatar/53566ac91a169b353a78b329bdd35c95?s=32&d=identicon" class="profile_img" alt="{username}"/>
</div>
<div class="comment_message">
<span class="username">{username}</span> Debugr Rocks! XD
</div>
<div class="comment_info">24-oct-2010</div>
</div>
</div>
<div class="profile_photo">
<img style="float:left;margin-right:7px;" src="http://gravatar.com/avatar/53566ac91a169b353a78b329bdd35c95?s=50&d=identicon" class="profile_img" alt="{username}"/>
</div>
That is repeated two or more times. What I want to do, is to when I click the "Comments (5)" link, the class "comment_container" appears, but only the one in the same "container" class.
It's this possible?

You can use .closest() to go up to the .container then .find() to look inside it, like this:
$(".toggle_comment").click(function() {
$(this).closest(".container").find(".comment_container").show();
});
You can try it here, if you're curious about finding other things relative to this here's a full list of the Tree Traversal functions.
As an aside, there's an error in your HTML that needs correcting, this:
<span class="username">{username} Debugr Rocks! </div>
Should be:
<span class="username">{username} Debugr Rocks! </span>