Emphasize multiple anchor points

I am looking to highlight two sections of a page simultaneously.

Here is what I currently have:

<li class="langLI" style="list-style-type:none"><a href="/non-discrimination-and-language-assistance##French">| French Creole</a></li>

and I want this footer link to anchor and highlight the following sections:

<p id="French"><strong>French Creole</strong><br />
    ATTENTION: Special language services are available for you if you speak Haitian Creole. Call 1-321-268-6111. (TTY: 1-800-955-8771)</p>

<p id="French"><strong>French</strong><br />
    ATTENTION: If you speak French, free language assistance services are available to you. Call 1-321-268-6111. (TTY: 1-800-955-8771)</p>

This is the CSS code being used to highlight the selected section:

    #French:target{
     background-color: #ffa;
    -webkit-transition: all 1s linear;}

Currently, only French Creole is being highlighted. How can I adjust it to highlight both sections?

htmlcss

Answer №1

Javascript Approach

<li class="langLI" style="list-style-type:none"><a onclick="mulselect()">| French Creole</a></li>

Utilizing an onclick listener in Javascript to call a function, fetching all elements with the 'French' class as an array, and then looping through them to modify their styles.

function mulselect(){
    french=document.getElementsByClassName("French");
    for( i in french ) {
  french[i].style.backgroundColor = 'yellow';
}

CSS Method "If they are at the same location"

Observe the modification in the href attribute, now the link directs to the parent div of the selected elements.

<li class="langLI" style="list-style-type:none"><a href="#targetarea">| French Creole</a></li>

Enclose these p tags within a parent div with the id 'targetarea'

<div id="targetarea">
<p class="French"><strong>French Creole</strong><br />
ATANSYON: Si w pale Krey&ograve;l Ayisyen, gen s&egrave;vis &egrave;d pou lang ki disponib gratis pou ou. Rele 1-321-268-6111. (TTY: 1-800-955-8771)</p>
<p class="French"><strong>French</strong><br />
ATTENTION: Si vous parlez fran&ccedil;ais, des services d'aidelinguistique vous sont propos&eacute;s gratuitement. Appelez le 1-321-68-6111. (TTY: 1-800-955-8771)</p>
<p class="English"><strong>French</strong><br />
ATTENTION: Si vous parlez fran&ccedil;ais, des services d'aidelinguistique vous sont propos&eacute;s gratuitement. Appelez le 1-321-68-6111. (TTY: 1-800-955-8771)</p>
</div>

Update the CSS to this

#targetarea:target .French{
 background-color: #ffa;
-webkit-transition: all 1s linear;

Enhanced control over selection achieved, where only elements with the class 'French' will be highlighted. `

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for ensuring that each flexbox element fills up a single line

My goal is to have each child element fill up one line by itself. See this screenshot for reference: https://i.stack.imgur.com/F40Xm.png Below is the code I am currently using: main { display: flex; justify-content: space-around; align-items: ...

htmlcssflexbox

Revamping the design of a menu bar in WordPress

I designed a navigation bar and now I'm looking to customize the CSS for it in WordPress. Specifically, I want to be able to reference the nav bars by name from PHP to CSS. It seems like there are just two dots representing variables. Here is the co ...

phpcsswordpress

Updating class after refresh of ng-repeat in AngularJS/Javascript

I am currently using angularJs in conjunction with cordova. Within my ng-repeat loop, each item has an ng-click event that stores the value of the item in an array. Additionally, when I click on an item, it toggles a class on the corresponding div (using ...

javascriptcssangularjsarrayscordova

Responsive menu not collapsing properly and appearing funky in Drupal

I've managed to create a responsive navigation bar, but I'm encountering two issues. Firstly, when I resize the screen on my test pages, not all of the links hide as expected. Secondly, after inserting the code into Drupal, the nested links appea ...

javascripthtmlcssdrupal

Is it possible to serve CSS using relative paths that go beyond the URL root?

I've encountered a file path issue with my HTML and CSS files. My HTML file is located in: src/test/html/index.html And the corresponding CSS file is in: src/test/css/index.css In the HTML file, the CSS is linked using: <link rel="stylesheet" ...

htmlcssbrowsercross-browser

When the ::after pseudo element is utilized for creating a bottom border, it will display following each individual list item contained within the specified div

I have been using a pseudo-element to create a division line between sections, and it was working perfectly until I added a list of items. Now, the division line is appearing after every <strong> and <li> tag. I have tried various approaches, s ...

htmlcsspseudo-element

The integration of ag-grid webpack css is not reflecting on the website as intended

I'm facing an issue with ag-grid in my react application where I can't seem to get the CSS working properly with webpack. The grid is currently displaying like this: image: const path = require("path"); var webpack = require("webpack"); let H ...

cssreactjswebpackag-gridag-grid-react

Caution: session_start(): Unable to initialize session cookie - headers have already been sent by (output initiated at

A warning message is displayed on the login page: "It's working in localhost but not in remote host" Warning: session_start() [function.session-start]: Cannot send session cookie - headers already sent by (output started at on line 8) Warning: sess ...

phphtmlmysql

Limit the precision of decimal number output to a specific value

I need assistance with achieving the output 999999.35 in angular or javascript combined with html. I am looking to restrict the number of 9's to a maximum of 6 digits before the decimal point, and after 6 digits it should not accept any more digits. A ...

javascriptjqueryangularjshtml

Mastering the Art of Utilizing Box Component Spacing Props

Easy margin and spacing adjustments are possible with the help of Material-UI. They provide shortcuts that eliminate the need to individually style components with CSS. In the code snippet below, it's important to note that specifying the measuremen ...

cssreactjsmaterial-ui

Unable to interact with menu in Internet Explorer

I am facing an issue with my code that should create a dropdown menu when hovered on, but it is not working properly in Internet Explorer. Instead of dropping down the menu, IE pushes it to the right, making it impossible to interact with. Surprisingly, th ...

htmlcssdrop-down-menu

Flashing issues when utilizing the Jquery ui slider within an Angular 2 component

I recently incorporated a jquery-ui slider plugin into an angular 2 component and it's been working well overall, but I have encountered an annoying issue. Whenever the slider is used, there is a flickering effect on the screen. Interestingly, when I ...

csshtmljquery-uitypescriptangular

Maintain consistent width of a page across different mobile devices

Currently, the content on my page does not have any viewport settings. It is simply using a 25% left and right margin for the entire content area. The issue arises when accessing the page from a mobile device, as the width adjusts to match the screen size ...

htmlcssresponsive-designviewport

In bootstrap 3.0, columns are arranged in a vertical stack only

As a newcomer to web design, I've been struggling to figure out why my basic grid in Bootstrap 3 isn't working as expected. No matter what I try, my columns stack vertically instead of side by side and always resize to fill the browser window. Th ...

csstwitter-bootstrap

How to target only the parent div that was clicked using jQuery, excluding any

I have attempted to solve this issue multiple times, trying everything I could find on Google and stack overflow without success. At times I am getting the span element and other times the div - what could be causing this inconsistency? $(".bind-key"). ...

javascripthtmljquery

Require the capability to bypass inline CSS styling

Currently facing an issue with a wordpress website I am constructing using iThemes Builder. The problem arises when integrating the plugin Jquery Megamenu, as the drop-down menu gets truncated due to an overflow:hidden property that cannot be overridden i ...

jquerycsswordpressbuilder

Positioning a flex item to the right by using float

I am in need of assistance with my HTML layout. <div class="container"> <div class="sidebar" style="float:right"> Ignore sidebar? </div> <div> main content </div> </div> The container is set to have a flex disp ...

htmlcssflexbox

Fix the uneven shape border/outline

I made 3 circles using CSS (:after) and noticed that the border looks uneven with certain background colors. Any suggestions on how to resolve this issue? You can view the problem here: Just below the post title, you'll find the first blue circle bo ...

cssborder

Unable to invoke function on HTML element

Recently, I've ventured into writing jQuery-like functions in Vanilla JS. While my selectors seem to be working fine, I encounter an "is not a function" error when trying to call the append function on an HTML element. var $ = function(){ this.se ...

javascripthtml

What is the best way to show and hide the information in a FAQ section when each one is clicked?

const faqItems = document.getElementsByClassName("faq-question"); const faqContents = document.getElementsByClassName("faq-content"); for (item of faqItems) { console.log(item); item.addEventListene ...

javascripthtmlcssarraysperformance