We Keep Coding

how to expand toggle using javascript?

I am trying to expand toggle class using JavaScript but its not working, i am using setAttribute('aria-expanded', 'true') its giving error set-attribute is null.
(document.getElementById("collapseid")as HTMLTextAreaElement).setAttribute('aria-expanded', 'true')
How can we expand the toggle area with div id using JavaScript and without use of click. i am not sure set attribute will solve the issue, i tried to set the attribute true using Edit Html option but it dint work.
unless i click on the toggle button its not expanding, please let me know how to achieve this

Document.getElementById will already return you an Element object, no need for that 'as ...' that you're doing.
The function .setAttribute is supposed to work in any Element object, so you can fix it by simply doing:
let collapseObject = document.getElementById("collapseid")
collapseObject.setAttribute('aria-expanded', 'true')
Now, if you need to add or remove a class, I recommend using the classList.add() and classList.remove() functions.

How to set "style=display:none;" using jQuery's attr method?

Following is the form with id msform that I want to apply style="display:none" attribute to.
<form id="msform" style="display:none;">
</form>
Also the check should be performed before adding the "style=display:none;" property. That is if it is already set like in above code it should not set again.
But if it's not set then it should.
How should I achieve this? Please help me.

Why not just use $('#msform').hide()? Behind the scene jQuery's hide and show just set display: none or display: block.
hide() will not change the style if already hidden.
based on the comment below, you are removing all style with removeAttr("style"), in which case call hide() immediately after that.
e.g.
$("#msform").removeAttr("style").hide();
The reverse of this is of course show() as in
$("#msform").show();
Or, more interestingly, toggle(), which effective flips between hide() and show() based on the current state.

As an alternative to hide() mentioned in other answers, you can use css() to set the display value explicitly:
$("#msform").css("display","none")

$(document).ready(function(){
var display = $("#msform").css("display");
if(display!="none")
{
$("#msform").attr("style", "display:none");
}
});

You can use the hide and show functions of jquery. Examples
In your case just set $('#msform').hide() or $('#msform').show()

Based on the comment we are removing one property from style attribute.
Here this was not affect, but when more property are used within the style it helpful.
$('#msform').css('display', '')
After this we use
$("#msform").show();

You can just use: $("#msform").hide(). This sets the element to display: none

You can use the jquery attr() method to achieve the setting of teh attribute and the method removeAttr() to delete the attribute for your element msform
As seen in the code
$('#msform').attr('style', 'display:none;');
$('#msform').removeAttr('style');

Please try below code for it :
$('#msform').fadeOut(50);
$('#msform').fadeIn(50);

Hiding button in JQuery using .prop(hidden: true)

I am trying to figure out how to hide a button with JQuery using the .prop(hidden: true) method. For some reason, in Chrome when I set this value and view the html, the button has a hidden element, but the button still shows up as visible on the page.
Any ideas?

A button does'nt have a hidden property ?
$('button').hide();
or
$('button').toggle(true); //shows button
$('button').toggle(false); //hides button

You can use set the display style to none. For example,
$("#button").css("display", "none");
Or, .hide() for brevity,
$("#button").hide()
There's also visibility and opacity but these two may not generate the effect you desired.

You can't hide a button using jQuery's .prop() function, you have to use either .hide() or .fadeOut() or you can try with .css() method:
using .css():
$('input[submit]').css('display','none');
using fadeOut():
$('input[submit]').fadeOut();
using .hide():
$('input[submit]').hide();

Your syntax is incorrect, but there's no "hidden" property anyway. You probably want:
$('#your_button').hide();
or possibly
$('#your_button').addClass('hidden');
if you've got a "hidden" class in your CSS.
The incorrect part of your syntax is that the parameters to your function call are expressed incorrectly. Setting a property should look like:
$("#your_button").prop("name", "value");

jQuery.prop is intended for HTML attributes only, things defined on the DOM node. CSS styles aren't applicable things to set with prop, and hidden just doesn't exist, whereas href or class is applicable. Instead you must use $(el).css('display', 'none') or $(el).hide().

What you described is actually correct if you happen to use jquery alongside bootstrap4.
just do the following:
$element.prop('hidden', true);
If no bootstrap 4 available it is still works for modern browser.

prop() is a getter function: http://api.jquery.com/prop/ I suggest using hide: http://api.jquery.com/hide/

If you want to use prop, then
$("#my_button").prop("style").display="none"
I would go w/o jquery. (back to the basic)
document.getElementById("mybutton").style.display = "none";

You can use a ternary operator and the css() method to accomplish the same thing: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
$("#button").css("display", (mycondition) ? "block" : "none");

jQuery add class based on CSS characteristics

I am looking for a method with jQuery (or plain JS) in which to build a conditional on whether a div has a specific CSS characteristic.
For example, I want jQuery to add position:fixed to an element's CSS when another element is set to display:none, though change back to position:relative on the first element when the second element changes to display:block.
Any ideas?

If your change is event driven you just add the code to your event handlers
so if element one is made hidden by a click - make element 2 position fixed
$("#element_one").click(function(){
$("#element_one").hide();
$("#element_two").css({"position":"fixed"});
})
if you just want to watch elements you will need timers (although I cannot really imagine a scenario where you do not trigger the change by either an event of programaticaly)
watchInterval = setInterval("watchMe()",10)
function watchMe(){
if ($("element_one").is(":hidden") ) {
$("#element_two").css({"position":"fixed"});
}
}

$('#elOne').css('display') == 'none' ? $('#elAnother').css({'position':'fixed'}) : $('#elAnother').css({'position':'relative'});
Would that do the trick?
or perhaps :
$('#elOne').is(':hidden') ? $('#elAnother').css({'position':'fixed'}) : $('#elAnother').css({'position':'relative'});

There's not any nice way of doing this as you cannot "spy" on CSS changes, though jQuery does have a watch plugn which can monitor changes on certain properties. Your best bet is to use getComputedStyle which will get the real CSS values used for any object and act accordingly.

jQuery Hide using ID

I'm trying to change the border color of an image using its id with jquery
( photo['id'] is passed in from a previous function )
the ids of the photos are of the form 'photo239839'
$('#photo'+photo['id']+'').click(function(){
$('#photo'+photo['id']+'').css('border-color','#777');
});
When I try to use this same code using its class it works,
but I can't use this method since there are multiple images on the same
page with the same class
$('img.flickr_photo').click(function() {
$("this.flickr_photo").css('border-color','#777');
});

This is what you need to do:
$('img.flickr_photo').click(function(){
$(this).css('border-color','#777');
});

I would always always add a css class rather than an inline style.
Much more maintainable and extensible.
Example:
$('img.flickr_photo').click(function(){
$(this).addClass('greyishBorder');
});

Either photo['id'] is wrong, or is changing after you set up the click handler.
To test for the first case, you can alert (or console.log with FireBug, or whatever) the length of the jQuery selection:
alert($('#photo'+photo['id']).length);
The solution in the second case is to use 'this'. In the click handler, 'this' is set to the element that caused the click event.
$('#photo'+photo['id']).click(function(){
$(this).css('border-color','#777');
});
Edit: #Dreas Grech is right, as long as you want to apply the behavior to all the elements with the flickr_photo class. If you can generalize the selector to select all the elements with a single query, it's better to do that.