Develop Reference

When hovering over an element with a certain index, change the styles of the element in another parent with the same index

I have a menu on the site in two places. One is made by text, and the other by pictures. You can click on both.
I want that when you hover over a specific item in a text menu (for example, under number 2), the picture with the same number changes (for example, under 2).
Code for text menu:
<ul>
<li class="page_item">
Test 1
</li>
<li class="page_item">
Test 2
</li>
</ul>
Code for Pictures menu:
<div class="project__card project__card-design">
<div class="project__card-design-bigelem">
</div>
<div class="project__card-design-bigelem">
</div>
<div class="project__card-design-bigelem">
</div>
</div>
Screen shot with Picture and text menu:
Screen shot with Picture and text menu
I will be grateful for any help!
Since I was looking for solutions that could identify the element with which number was highlighted. But so far I don’t even have ideas on how to do this.
All thanks in advance for any help!

If you like for this behaviour you can do this
hover: nav1 > imageNav1 ect...
You can get the index of the hover item and match that to the image nav item. Sorry for the markup, it's just to show you how you can implement it. You can also choose to do whatever after the matching is made in the mouseenter
$(".js-hover").on("mouseenter", function () {
const hoverIndex = $(this).index();
const $imageListItems = $(".image-list > li");
$imageListItems.removeClass("image-list__item--selected");
$imageListItems.eq(hoverIndex).addClass("image-list__item--selected");
});
.image-list__item--selected {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list">
<li class="js-hover">text</li>
<li class="js-hover">text</li>
<li class="js-hover">text</li>
<li class="js-hover">text</li>
</ul>
<ul class="image-list">
<li>image1</li>
<li>image2</li>
<li>image3</li>
<li>image4</li>
</ul>

Here's a solution with pure js, works for elements that are not parents using ids.
html
<li id="child1" onmouseenter="customHover(event)" onmouseleave="handlemouseleave(event)"></li>
<div id="parent1"> </div>
<li id="child2" onmouseenter="customHover(event)" onmouseleave="handlemouseleave(event)"></li>
<div id="parent2"> </div>
<li id="child3" onmouseenter="customHover(event)" onmouseleave="handlemouseleave(event)"></li>
<div id="parent3"> </div>
and heres the js
function customHover(e){
let id = e.target.id;
let idNumber = id.slice(id.length - 1);
document.getElementById(`parent${idNumber}`).style.border = '1px solid red';
}
function handleMouseLeave(e){
let id = e.target.id;
let idNumber = id.slice(id.length - 1);
document.getElementById(`parent${idNumber}`).style.border = 'unset';//or whatever you need to change the styles back to the original
}

there are many solutions , with an without using libraries. I think you may use some jquery if possible , and if not you should search for addeventlistener (the advanced way)
https://api.jquery.com/hover/
is a good example of doing what you are trying todo .
var pageitemcount=0;
$( ".page_item" ).hover(function() {
pageitemcount++;
$.post("/mypageitemcounter.php",{pageitemcount:pageitemcount});
$(this).parent().append( $( "<span>"+pageitemcount+"</span>" ) );
});
The above part is for php , still can be used in a plugin.
If you are in wordpress environment , you have to dig into how to write wp plugins also. Trying to achieve this in an environment , and then applying the same to your custom wp plugin is the way to go. Do not change the existing plugins, or themes if possible. This may cause headaches after an update.. In wp environment, writing a custom plugin is the way to go. You should tag your question as wp-plugin if possible.

How to add an image to a locked html code

I'm having a big problem here. I want to add an image to html code. No big deal if only I had access to the html code. Unfortunately it's locked and it looks like that:
<ul class="cc-nav-level-0 j-nav-level-0">
<li id="cc-nav-view-1691317785" class="jmd-nav__list-item-0 j-nav-has-children cc-nav-parent j-nav-parent jmd-nav__item--parent">
Sound Packs
<span data-navi-toggle="cc-nav-view-1691317785" class="jmd-nav__toggle-button"></span>
</li>
<li id="cc-nav-view-1691317885" class="jmd-nav__list-item-0">
Apps
</li>
<li id="cc-nav-view-1691318285" class="jmd-nav__list-item-0">
Comments
</li>
<li id="cc-nav-view-1701055985" class="jmd-nav__list-item-0">
News
</li>
</ul>
The image I would like to add should be to the right of the font. Is there a way to insert the code somehow?

Sure, you should be able to do what you want. Look at the jQuery commands: .append(), .html(), etc. For example:
Note that you can also inject new CSS the same way...
$(function(){
var newstuff = '\
<style>\
#new{color:red;}\
</style>\
<div id="new">Here is a newly-injected DIV</div>\
';
$('#mt').html(newstuff);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="mt">You can replace what is there with modified/enhanced code.</div>

You could try to link a script that inserts an element after the DOM loads. Something like this:
document.addEventListener('DOMContentLoaded', () => {
document.querySelector('ul').insertAdjacentHTML('afterend', '<div></div>')
})
Then you could use inline styling to make it whatever height, width and background you'd like:
<div style="height:300px;width:300px;background:url(yourImg.jpg);></div>
I made a quick pen to show you what it looks like.

replace a content with another using onclick

I am using one of the bootstrap snippet for login dropdown box in the login box there is a link for Join Us I wanted that when i click on Join Us, the content within the box should get replaced by another box that contains login credentials
I modified the following code
New here ? <b>Join Us</b>
with the code below
New here ? <b>Join Us</b>
and created another content that had id signup-dp like this
<ul id="signup-dp" class="dropdown-menu">
// signup data Inside this part
</ul>
Now when i click on the Join Us link the url of the page gets changed i.e #signup in the end of the url, but the content does not get displayed,
can anyone please tell how to do so

Please check jquery included or not.
Use return false like below
<b>Join Us</b>
#signup-dp{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<b>Join Us</b>
<div id="login-dp">login-dp</div>
<div id="signup-dp">signup-dp</div>

Its very simple and you code is working for me only.
<a href="#" onClick="$('#login-dp').hide(); $('#signup-dp').show()">
<b>Join Us</b>
</a>
<a href="#" onClick="$('#login-dp').show(); $('#signup-dp').hide()">
<b>Login</b>
</a>
<ul id="signup-dp" class="dropdown-menu">
// signup data Inside this part
</ul>
<ul id="login-dp" class="dropdown-menu">
// login data Inside this part
</ul>
Please follow this link . JSfiddle

Onclick jQuery is not working, So user Javascript code
New here ? <a href="#" onclick='document.getElementById("login-dp").style.display = "none";document.getElementById("signup-dp").style.display = "visible";'><b>Join Us</b></a>

Put the new hidden element somewhere before your existing element.
unless you write your jQuery code in $(document).ready(); in a separate file, or internal.

Your code is correct. But please check have you included jquery file.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
This jquery should be included before the jquery code you have written.
Put following jquery code to make signup div initially hidden.
<script type="text/javascript">
$(document).ready(function(){
$("#signup-dp").hide();
});
</script>

First of all, for make good programming habit you have to bind click event instead of write javascript code inside of tag onClick attribute.
<b>Join Us</b>
In your javascript code (try to write code in other js file instead of inline code in HTML page.)
$(document).ready(function(){
$("#btn_join_us").click(function(e){
e.preventDefault();
$('#login-dp').hide();
$('#signup-dp').show();
return false;
});
});
This kind of code make some secure event binding. otherwise anyone can make change your code from inspect element and execute this.

Click button with hide and show

Need get this fixed as I've been trying for a month. Can you look at my website for the button that doesn't work?
http://www.insightenergy.eu/about-us.php
What is wrong with it?

try the following code to expand or minimize the container.
$('.expander').click(function(){
if(condition){
$('.expander').next().show();
}
else{
$('.expander').next().hide();
}});

You need to attach an event to your buttons, and when I debug I get nothing on click.
Looking at your web I think you maybe need something like that:
Your HTML structure is similar to this one:
HTML
<ul class="blog-post-full-list">
<li >
<div >0</div>
<div class="expandible">Content</div>
</li>
<li >
<div >1</div>
<div class="expandible">Content</div>
</li>
<li >
<div >2</div>
<div class="expandible">Content</div>
</li>
<li >
<div >3</div>
<div class="expandible">Content</div>
</li>
</ul>
So in your code you can use the JQuery function toggle:
JS
$(".blog-post-full-list>li").on('click',function(){
/*
*The object this is the li you've clicked on
*The jQuery function toggle swiches the display ON OFF
*The number 300 means the duration of the animation. If you don't
* want to animate it just remove the parametter
*/
$(this).find(".expandible").toggle(300);
})
http://jsfiddle.net/vzkUL/2/
You can add it into a JS file or inline in your code as follows:
<script>
//JQuery onReady
$(function(){
$(".blog-post-full-list>li").on('click',function(){
//The object this is the li you've clicked on
//The jQuery function toggle swiches the display ON OFF
//The number 300 means the duration of the animation. If you don't want to animate it just remove the parametter
$(this).find(".expandible").toggle(300);
})
});
</script>

jquery load() specific div not working

Here is the portion of HTML in question as well Javascript related to it:
HTML first:
<div id="menu">
<ul>
<li>click</li>
</ul>
</div>
Javascript goes:
$("#menu a").click(function(){
var link=encodeURI($(this).attr("href"));
$("#divtobeloadedwith").load(link);
return false;
});
content.html structure:
<div id="wrapper">
<div id="diviwant">stuff</div>
<div id="dividontwant">stuff</div>
</div>
Upon clicking on link it loads all the content instead only specific div.

Fundamentally the problem is that you want two different things:
When running without Javascript, you want to use the link content.html#diviwant, as that will load the page content.html and then jump to the element with the ID diviwant.
When running with Javascript, you want to pass content.html #diviwant to jQuery's load() method, as that tells jQuery to load only the fragment with the id diviwant from the target page.
I'd probably use content.html#diviwant as the link, as you've got, then interpret that in the jQuery like this:
$("#divtobeloadedwith").load(link.replace('#', ' #'));
...to add the necessary space for the load().

You need to remove the space between content.html and #diviwant in the href of your link.
<li>click</li>
You also need to make sure that "divtobeloaded" exists.
<div id="menu">
<ul>
<li>click</li>
</ul>
</div>
<div id="divtobeloaded"></div>