Develop Reference

My js script is to toggle "active" class between selections on a sidebar menu but only allows toggling for the first selection

My issue is I am only able to toggle "active" class on my first "side-menu" div and not the others. Please take a look at my codes and let me know what is wrong.
When active, there will be a span on the left showing that it is the current selection, refer to the attached image.
HTML SCRIPT
<div class="sidebar">
<div class="side-menu">
<a class="side-option" href="#beverages"><img src="images/beverage.png" alt=""></a>
<p>Beverages</p>
</div>
<div class="side-menu">
<a class="side-option" href="#burger"><img src="images/burger2.png" alt=""></a>
<p>Burger</p>
</div>
<div class="side-menu">
<a class="side-option" href="#pizza"><img src="images/pizza1.png" alt=""></a>
<p>Pizza</p>
</div>
<div class="side-menu">
<a class="side-option" href="#pasta"><img src="images/pasta2.png" alt=""></a>
<p>Pasta</p>
</div>
<div class="side-menu">
<a class="side-option" href="#sides"><img src="images/sides1.png" alt=""></a>
<p>Sides</p>
</div>
<div class="side-menu">
<a class="side-option" href="#desserts"><img src="images/desserts1.png" alt=""></a>
<p>Desserts</p>
</div>
</div>
CSS SCRIPT
.side-menu.active p::after{
content: '';
background-color: var(--clr-primary);
width: 10px;
height: 100px;
position: absolute;
left: 0px;
top: 5px;
JS SCRIPT
let sidemenu = document.querySelector('.side-menu')
let fbg = document.querySelector('.food-box-grid')
sidemenu.onclick=function(){
sidemenu.classList.toggle('active')
fbg.classList.toggle('active')
}
I can toggle active class on the "beverages" but not on the other options such as burger, pizza...

According to MDN
querySelector() returns the first Element within the document that matches the specified selector
You want to use querySelectorAll(), then iterate through the output and toggle the class for each element.
Something like this
let sidemenu = document.querySelectorAll('.side-menu')
let fbg = document.querySelectorAll('.food-box-grid')
sidemenu.onclick=function(){
sidemenu.forEach((i) => {
i.classList.toggle("active")
})
fbg.forEach((i) => {
i.classList.toggle("active")
})
}

Make div stayed in the same position

How can I make a div tag stay the same location with the same size? I have the following code to display information using left and right pane called group-left and group-right. When the content of group-right changes the group-left height changes. I want a fixed size and fixed position if the content grows.
<div class="pane even">
<div class="group-left bg-highlight" style="top: 0px;">
<div class="pane-content">
<p class="m-t-md">
#foreach (var item in rpInfo)
{
<li data-expanded="true" class="panel-handler" data-id="#item.ID">
<i class="fa fa-check-circle"></i>#item.PartyName
<ul class="list-unstyled m-x-md m-b-md">
<li data-expanded="true"> <i class="fas fa-check-circle">
</i> #item.ContactName </li>
</ul>
</li>
}
</p>
</div>
</div>
<div class="group-right" style="top: 0px;">
#foreach (var item in rpInfo)
{
<div class="card card-understated">
<div class="card-heading">
<h4>#(Localizer["Contact Preview "])</h4>
</div>
<div class="card-body">
<p>
#item.ContactName<br>
#item.ContactTitle<br>
#item.AddressLine1<br />
#item.City, #item.State #item.Country
</p>
</div>
</div
}
</div>
</div>
Here is what the CSS section looks like:
.group-left, .group-right {
float: none;
min-height: 320px;
vertical-align: middle;
position: relative;
margin: 0;
padding: 0;
}
I have this javascript code to make a treeview and to handle the Onclick event:
<script>
$(document).ready(function () {
$("#treeview").kendoTreeView();
$(".panel-handler ").click(function () {
let id = $(this).data("id");
if ($("#" + id).css('display') === 'none') {
$(".rpspanel ").slideUp();
$("#" + id).slideDown();
}
});
});
</script>

You have only set a min height on the divs, you need to specify a height if you want it to remain the same size, eg: "height: 300px". If you want the divs to be fixed on the page, meaning locked to that position and won't move even if you scroll, you need to apply "position: fixed".

getting data from an array test using protractor

I created a array with objects, which has different values, i needed to test the content of a specific array so i used
var child = element.all(by.css('.col.col-top.col-67')),element.all(by.css('.ng-binding'));
expect(child.get(1)).toEqual('HAL 9000');
this sends error msg in my terminal "FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - process out of memory
Abort trap: 6"
actually i need to check that hal 9000 is been displayed in the html page
<a class="item-content" ng-href="#/lead/details/1/" target="_self" href="#/lead/details/1/">
<div class="row" style="height: 35px; width: 100%; margin-left:-10px; margin-top: -10px; margin-right: 0px; padding: 0px">
<div class="col col-top col-67">
<h2 class="ng-binding">HAL 9000</h2>
<br>
<h4 style="font-weight: normal; margin-top: -15px" class="ng-binding">Jupiter Feb 10, 2025 </h4>
</div>
<div class="col col-center col-10 col-offset-25" style="margin-right: -10px">
<a href="tel:9876543210" ng-click="$event.stopPropagation()">
<i class="icon ion-ios-telephone-outline" style="font-size: 36px"></i>
</a>
</div>
<div class="col col-center col-20" style="margin-left: 15px">
<a href="mailto:hai#spaceodyssey.com?Subject=Hi;" ng-click="$event.stopPropagation()">
<i class="icon ion-ios-email-outline" style="font-size: 36px;"></i>
</a>
</div>
</div>
</a>

element.all() cannot be attached to an instance of element.all(). Moreover you are using a , instead of a . Try dividing .ng-binding in a way such that you can get it without need to use an array. If you have to get all elements under .col.col-top.col-67 then use .each() function to get each div with that class and then use each div to get all elements with .ng-binding. Here's how -
element.all(by.css('.col.col-top.col-67')).each(function(eachDiv){ //get each div with the specified class
var child = eachDiv.$$('.ng-binding'); //get all the elements with ng-binding under each div
expect(child.get(1)).toEqual('HAL 9000'); //add your expectations
});
NOTE: When you use each() it loops through all the elements using that element locator just like a for loop. Assuming that there are many elements with the class .col.col-top.col-67 and many elements under it with class .ng-binding.
If at all there is a single element then you don't have to use element.all() in the above code. Hope it helps

thanks for your help i just slightly modify the above code given by Girish Sortur
var lItems = element.all(by.css('.col.col-top.col-67'));
var child = lItems.get(1).$$('.ng-binding'); //get all the elements with ng-binding under each div
expect(child.get(0).getText()).toEqual('HAL 9000'); //add your expectations

getting undefined values in java-script alert

can anyone please tell me why i'm getting undefined in javascript when i run the below code.
its a simple code for getting the parent div id. All div's are closed properly but still getting undefined.
html
<div id="ricolaId_2" class="ricMo ricIndex ricBlocking ricInline" style="width: 730px; left: 309px; top: 144px; z-index: 13000; display: block;">
<div class="ricTitle">
<a class="ricClose">
<span class="ui-icon ui-icon-close" title="Close">
</span>
</a>
<span class="ricTitle">Manage</span>
</div>
<div class="ricModal ng-scope" style="height: auto;">
<div>
<div>
<div ng-controller="Manage" class="ng-scope">
<div class="ricCenter">
<div class="ricport">
<div class="ricWr">
</div>
</div>
</div>
</div>
<br style=""></br><br style=""></br>
<div align="center" class="row btn-group">
<button onclick="cancel(this)" class="ricSmall" type="button" id="sss" ric:loaded="true">Close</button>
</div>
</div>
</div>
</div>
</div>
script
function cancel(btn)
{
try{
ricId_1 = $(btn).parent().parent();
alert(ricId_1.attr("id"));
}catch(a){alert(a);}
}

To target that id you need:
$(btn).parent().parent().parent().parent().parent();
or:
$(btn).closest('.ricModal').parent();
Demo

Use parents instead of .parent()
function cancel(btn)
{
try{
ricId_1 = $(btn).parents('#ricolaId_2');
alert(ricId_1.attr("id"));
}catch(a){alert(a);}
}
parent method only travels a single level up the DOM tree and parents method travels through multiple level up the DOM tree.

I changed a few things, and look: It's working! You should add an id to ng-scope So, http://jsfiddle.net/8F8Mr/7/
Update
http://jsfiddle.net/8F8Mr/9/

Add a span tag inside a h5 using javascript

I want to insert a span with a class using javascript inside this h5 tag which will apply to the first word:
<div class="container_skitter" style="width: 715px; height: 230px;">
<div class="image">
<a href="#">
<div class="label_skitter" style="width: 715px; display: block;">
<h5>Increase knife life</h5>
</div>
</div>
</div>
After
<div class="container_skitter" style="width: 715px; height: 230px;">
<div class="image">
<a href="#">
<div class="label_skitter" style="width: 715px; display: block;">
<h5><span class="firstword">Increase</span> knife life</h5>
</div>
</div>
</div>
Is it something like this?
<script>
$('h5').html(function (i, html) {
return html.replace(/(\w+\s\w+)/, '<span>$1</span>')
});
</script>
Can't seem to get it to work.
Thanks

Add this under document.ready. Your script runs too early before DOM has been loaded completely. Also you need to match only the first word so this is enough to select it. /(\w+\s)/
$(document).ready(function(){
$('h5').html(function (i, html) {
return html.replace(/(\w+\s)/, '<span class="test">$1</span>')
});
});
Fiddle

You are on the right track. Let's try and do this without JQuery!
<script>
Array.prototype.slice.call (document.querySelectorAll ('h5')).forEach
function (h5el) {
// we will come here with h5el referencing an h5 of the document
h5el.innerHTML = h5el.innerHTML.replace (/^(\w+)\s/,
'<span class="firstword">$1</span> ';
});
</script>
Place this script just before or just after the tag and presto, all your h5 elements will be modified.