Develop Reference

Is it possible to change an attribute value from another html file?

So I have a website right now and I want to change the aria-expanded value of an exapandable paragraph in another page when I press an anchor element in the main page. What will I need to change in my main.html so i can somehow change the aria-expanded value on the help.html file?
main.html
<a href="help">
<h2>Returns Policy</h2>
</a>
help.html
<div class="accordion-item">
<button id="accordion-button-3" aria-expanded="false"><span
class="accordion-title">Returns Policy</span><span
class="icon" aria-hidden="true"></span></button>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et
leo duis ut. Ut tortor pretium viverra suspendisse potenti.
</p>
</div>
</div>
//and this is the script used to expand the paragraph
const items = document.querySelectorAll(".accordion button");
function toggleAccordion() {
const itemToggle = this.getAttribute('aria-expanded');
for (i = 0; i < items.length; i++) {
items[i].setAttribute('aria-expanded', 'false');
}
if (itemToggle == 'false') {
this.setAttribute('aria-expanded', 'true');
}
}
items.forEach(item => item.addEventListener('click', toggleAccordion));

your button id is "accordion-button-3" so in querySeletorAll you need "#accordion-button-3"
const items = document.querySelectorAll("#accordion-button-3");

How do I highlight search queries using Vue+html

Here my search is working but I am a newbie and doesn't know how to use the npm...I am using HTML with VueJS to implement this and successsfully created the search filter but couldn't implement the highlight filter..Some leads are markjs.io that is used and some other custom vuejs filters but couldn't implement them.
class Post {
constructor(title, link, author, img, course, coursel, cours, coursl, cour, courl, cou, coul, co, col) {
this.title = title;
this.link = link;
this.author = author;
this.img = img;
this.course = course;
this.coursel = coursel;
this.cours = cours;
this.coursl = coursl;
this.cour = cour;
this.courl = courl;
this.cou = cou;
this.coul = coul;
this.co = co;
this.col = col;
}
}
const app = new Vue({
el: "#app",
data: {
search: "",
postList: [
new Post("abc", null, "xyz", "wqw", "qwe", "", " ", null, " ", null, " ", null, " ", null, );
]
},
computed: {
filteredList() {
return this.postList.filter(post => {
return post.title.toLowerCase().includes(this.search.toLowerCase()) ||
post.author.toLowerCase().includes(this.search.toLowerCase()) ||
post.course.toLowerCase().includes(this.search.toLowerCase()) ||
post.cours.toLowerCase().includes(this.search.toLowerCase()) ||
post.cour.toLowerCase().includes(this.search.toLowerCase()) ||
post.cou.toLowerCase().includes(this.search.toLowerCase()) ||
post.co.toLowerCase().includes(this.search.toLowerCase());
});
}
}
});
Here is the HTML code I am using
<div id="app">
<div class="search-wrapper">
<input type="text" v-model="search" placeholder="Search"
onfocus="if(this.value==this.defaultValue)this.value=''"
onblur="if(this.value=='')this.value=this.defaultValue" />
</div>
<div class="wrapper">
<div class="col-lg-12 col-md-4 card" v-for="post in filteredList">
<a v-bind:href="post.link" target="_blank">
<img v-bind:src="post.img"/>
<div style="line-height:20%;">
<br>
</div>
<font size="2">{{ post.author }}</font>
<div class="brmedium"></div>
<font size="5"><b><i><em>{{ post.title }}</em></i></b></font>
<a v-bind:href="post.coursel" title="View Credential" target="_blank"><font size="3">{{ post.course }}</font></a>
<a v-bind:href="post.coursl" title="View Credential" target="_blank"><font size="3">{{ post.cours }}</font></a>
<a v-bind:href="post.courl" title="View Credential" target="_blank"><font size="3">{{ post.cour }}</font></a>
<a v-bind:href="post.coul" title="View Credential" target="_blank"><font size="3">{{ post.cou }}</font></a>
<a v-bind:href="post.col" title="View Credential" target="_blank"><font size="3">{{ post.co }}</font></a>
</a>
</div>
</div>
</div>

<template>
<div>
<input v-model="text" #input="input" />
<p id="x">
Lorem ipsum dolor sit āmet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, nò sea takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et
</p>
</div>
</template>
<script>
/*eslint-disable */
export default {
data() {
return {
t: String(""),
text: String(""),
};
},
mounted() {
this.t = document.querySelector("#x").innerText;
},
methods: {
input() {
document.querySelector("#x").innerHTML = this.t.replaceAll(
this.text,
`<span class='h'>${this.text}</span>`
);
},
},
};
</script>
<style>
.h {
background: red;
}
</style>
Simple highligh searching this might help you

Passing data among different HTML pages

I'm new to PHP and very lost.
I'm working with HTML5, CSS3, jQuery and Bootstrap 4.
I have a total of 4 HTML pages on my website. In the first page there are 4 squares with text (let's say A, B, C and D), user selects one of those squares and then presses the "Next" button. On click of this "next" user is taken to page 2 but this page needs to be updated according to user's selection in page 1 (A, B, C or D). And similarly data from page 2 and page 1 needs to be taken to page 3.
I read about doing it via URLs, AJAX, PHP sessions and a few more things, but since I'm new at this I'm very confused.
Please guide as to how can I pass data among different pages?
EDIT: I've not used forms.

There method depends on the purpose, this is one of the fundamental concepts and components in web development.
If you want to store or record your users interaction (for e-commerce, or social networking purposes) you will need the data to be passed to the server at some point (maybe after using a local storage object), there are 2 commonly used mechanisms PHP gives us to pass data from the client side to server side: $_GET & $_POST through a HTML from, and these can persist used cookies or sessions
If the data passed between pages is never going to provide any purpose for the site's function, then the local storage object may be used, the local storage object is particularly useful when large amounts of data may be stored on the users client, rather than fetching this expensive resource per request, to enhance user experience and minimise server load

You can do this with use of localstorage
First Page: (first.html)
localStorage.setItem("square_first", "A");
Second Page: (second.html)
localStorage.getItem("square_first");

You can use local storage following example will definitely help you.
on HTML page 1:
window.onload = function() {
var sqa = prompt("square: ","A");
localStorage.setItem("SQA",sqa);
}
On HTML page 2:
window.onload = alert(localStorage.getItem("SQA"));
You can use cookies but storage is better option as page request is not sent to server.

<html>
<head>
<title>Passing data among different HTML pages</title>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
</head>
<body>
<div>
<p>Section-A</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<input type="hidden" name="dataA" id="dataA" value="sample data A"/>
<button class="send_data" value="A">Next</button>
</div>
<div>
<p>Section-B</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<input type="hidden" name="dataB" id="dataB" value="sample data B"/>
<button class="send_data" value="B">Next</button>
</div>
<div>
<p>Section-C</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<input type="hidden" name="dataC" id="dataC" value="sample data C"/>
<button class="send_data" value="C">Next</button>
</div>
<div>
<p>Section-D</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<input type="hidden" name="dataD" id="dataD" value="sample data D"/>
<button class="send_data" value="D">Next</button>
</div>
</body>
</html>
<script>
$(document).ready(function() {
 
  $(".send_data").click(function(event){
  
var url="";
let sec = $(this).prop("value");
let data = $('#data'+sec).val();
if (sec=="A"){
url = 'demoA.html';
} else if (sec=="B"){
url = 'demoA.html';
}
else if (sec=="C"){
url = 'demoA.html';
}
else if (sec=="D"){
url = 'demoA.html';
}
var form = $('<form action="' + url + '" method="post">' +
'<input type="text" name="data" value="'+data+'" />' +
'</form>');
$('body').append(form);
form.submit();
  });
  
});
</script>

Combining functions to one button

I would like to have a single button that says, "Viewer One" and is tied to a section with the ID, "viewer_one". When the user clicks the button, I would like it to change to show, "Viewer Two" and also show the section with the ID "viewer_two" in place of where the other nav had been. Each time the button is clicked it will switch to the other.
I have two sets of script that perform each function individually, but I cannot figure out how to make them work at same time. At moment, I can either have a button that changes its value on click but does not impact the rest of the code or I can have the button impact the rest of the code but its own text does not change.
I have included my code below - I have included both sets of javascript so that you can see what I have but they only work when I include one or the other - I need help figuring out how to get them to work together.
Below is a condensed version of the code to the pertinent parts - the main code has several more list items for each viewer.
<!-- this gets the button click to change which list is visible-->
function switchVisible() {
if (document.getElementById('viewer_one')) {
if (document.getElementById('viewer_one').style.display == 'none') {
document.getElementById('viewer_one').style.display = 'block';
document.getElementById('viewer_two').style.display = 'none';
}
else {
document.getElementById('viewer_one').style.display = 'none';
document.getElementById('viewer_two').style.display = 'block';
}
}
}
<!--This gets the button text to change-->
function myFunction() {
var x = document.getElementById("Button1");
if (x.innerHTML === "Viewer Two") {
x.innerHTML = "Viewer One";
} else {
x.innerHTML = "Viewer Two";
}
}
<section id="second_nav">
<input id="Button1" type="button" value="Viewer One" onclick="switchVisible();"/>
<button id="Button1" onclick="myFunction()">Viewer One</button>
<nav class="viewer_nav" id="viewer_one">
<ul>
<li style="color: blue;"><b>VIEWER ONE:</b></li>
<li>Client Info</li>
<li>Scripts</li>
</ul>
</nav>
<nav class="viewer_nav" id="viewer_two">
<ul>
<li style="color: blue;"><b>VIEWER TWO:</b></li>
<li>Client Info</li>
<li>Scripts</li>
</ul>
</nav>
</section>
<div id="content_area">
<section class="viewer_class" id="view_area_one">
<h3 class="viewer_title" style="text-align: center;">VIEWER ONE</h3>
<span id="client1"></span>
<h4>Client Info</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<span id="scripts1"></span>
<h4>Scripts</h4>
<p>Et odio pellentesque diam volutpat. Vulputate eu scelerisque felis imperdiet proin. Turpis in eu mi bibendum neque.</p>
</section>
<section class="viewer_class" id="view_area_two">
<h3 class="viewer_title" style="text-align: center;">VIEWER TWO</h3>
<span id="client2"></span>
<h4>Client Info</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<span id="scripts2"></span>
<h4>Scripts</h4>
<p>Et odio pellentesque diam volutpat. Vulputate eu scelerisque felis imperdiet proin. Turpis in eu mi bibendum neque.</p>
</section>
No error messages, but I can only get one or the other to work, not in combination.
Thanks in advance for any help.

var currentViewer = 1
updatePage(currentViewer)
function switchViewer() {
if (currentViewer === 1) {
currentViewer = 2
} else if (currentViewer === 2) {
currentViewer = 1
}
updatePage(currentViewer)
}
function updatePage(viewer) {
switch(viewer) {
case 1:
document.getElementById('viewer_one').style.display = 'block';
document.getElementById('viewer_two').style.display = 'none';
document.getElementById('view_area_one').style.display = 'block';
document.getElementById('view_area_two').style.display = 'none';
document.getElementById('switchViewerButton').innerHTML = "Viewer 2"
break;
case 2:
document.getElementById('viewer_one').style.display = 'none';
document.getElementById('viewer_two').style.display = 'block';
document.getElementById('view_area_one').style.display = 'none';
document.getElementById('view_area_two').style.display = 'block';
document.getElementById('switchViewerButton').innerHTML = "Viewer 1"
break;
}
}
<section id="second_nav">
<button id="switchViewerButton" onclick="switchViewer()">Viewer One</button>
<nav class="viewer_nav" id="viewer_one">
<ul>
<li style="color: blue;"><b>VIEWER ONE:</b></li>
<li>Client Info</li>
<li>Scripts</li>
</ul>
</nav>
<nav class="viewer_nav" id="viewer_two">
<ul>
<li style="color: blue;"><b>VIEWER TWO:</b></li>
<li>Client Info</li>
<li>Scripts</li>
</ul>
</nav>
</section>
<div id="content_area">
<section class="viewer_class" id="view_area_one">
<h3 class="viewer_title" style="text-align: center;">VIEWER ONE</h3>
<span id="client1"></span>
<h4>Client Info (view_area_one)</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<span id="scripts1"></span>
<h4>Scripts</h4>
<p>Et odio pellentesque diam volutpat. Vulputate eu scelerisque felis imperdiet proin. Turpis in eu mi bibendum neque.</p>
</section>
<section class="viewer_class" id="view_area_two">
<h3 class="viewer_title" style="text-align: center;">VIEWER TWO</h3>
<span id="client2"></span>
<h4>Client Info (view_area_two)</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Some other text...</p>
<span id="scripts2"></span>
<h4>Scripts From V2</h4>
<p>Et odio pellentesque diam volutpat. Vulputate eu scelerisque felis imperdiet proin. Turpis in eu mi bibendum neque.</p>
</section>
Here's my version - I separated out the logic for controlling which viewer is currently visible from the code that changes the DOM, so you can more directly see how the current viewer changes the content of the page. I also didn't fully understand what you wanted to change on the button press, I've made it a content toggle as that seemed to be what you were going for? Your example only toggles the navbar. Let me know how this suits you.

So, If you want both to work together, write your javascript code as:
<!-- this gets the button click to change which list is visible-->
function switchVisible() {
<!-- Your Code -->
}
<!--This gets the button text to change-->
function myFunction() {
<!-- Your Code -->
}
<!-- My Code -->
window.onload = function(){
const button = document.querySelector("#switchViewerButton");
if (button) {
button.onclick = function(event){
event.preventDefault();
switchVisible();
myFunction();
}
}
}
And Replace the HTML line
<button id="switchViewerButton" onclick="switchViewer()">Viewer One</button>
with the line
<button id="switchViewerButton">Viewer One</button>
I hope it should work. Please comment if you face any problem in implementing the solution.

How to add a class to a parent element based on the child's class using jQuery

I'm creating a standard jQuery image slideshow, but I need to add a certain class to a container div, based on which slide is currently showing.
I'm using Flexslider which helpfully gives the current slide a class of 'flex-active-slide'. What I'd like to do is to use that class combined with a unique class to select the active slide (i.e. '.heating-slide.flex-active-slide).
I'd then like to have jQuery apply an additional class to the containing div (.image-slider.full-width), based on which slide is currently showing.
For example:
If the heating slide is showing, I'd like to apply a class of .heating-container to the .image-slider.full-width div.
If the cooling slide is showing, I'd like to apply a class of .cooling-container
And so on
Here's my code:
<div class="image-slider full-width">
<div class="image-slider-container">
<div class="flexslider wide">
<ul class="slides">
<li class="cooling-slide">
<img src="/assets/images/image-slider/slides/cooling-slide.jpg" />
<div class="flex-caption">
<h2 class="">Cooling</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
<a class="button" href="#">Find out more</a>
</div>
</li>
<li class="heating-slide">
<img src="/assets/images/image-slider/slides/heating-slide.jpg" />
<div class="flex-caption">
<h2 class="">Heating</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
<a class="button" href="#">Find out more</a>
</div>
</li>
<li class="ventilation-slide">
<img src="/assets/images/image-slider/slides/ventilation-slide.jpg" />
<div class="flex-caption">
<h2 class="">Ventilation</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
<a class="button" href="#">Find out more</a>
</div>
</li>
</ul>
</div>
</div>
</div>
And here's my poor attempt at writing the required code:
<script type="text/javascript" >
$(document).ready(function () {
$(".heating-slide.flex-active-slide") SOMETHING HERE (".image-slider.full-width").addClass("heating-container");
});
</script>
Any help you can offer will be appreciated!

Update
I wasn't taking into account the other class that was on the element, also made it remove the previously added class so you don't end up with all of them on there:
$(function() {
function setContainer() {
var activeSlide = $(".flex-active-slide");
var activeSlideClass = activeSlide.attr('class')
.replace('flex-active-slide', '')
.replace("-slide", "-container")
var slider = activeSlide.closest(".image-slider.full-width");
var latestClass = slider.data("latest-class");
if (latestClass) {
slider.removeClass(latestClass);
}
slider.addClass(activeSlideClass)
.data("latest-class", activeSlideClass);
}
$('.flexslider').flexslider({
animation: "fade",
controlsContainer: ".flex-container",
animationSpeed: 800, //Integer: Set the speed of animations, in milliseconds
slideshowSpeed: 10000, //Integer: Set the speed of the slideshow cycling, in milliseconds
after: function() { setContainer(); }
});
setContainer();
});
You should be able to paste that into your code as is instead of the existing flexslider binding.
Working Fiddle - http://jsfiddle.net/xt4Ym/3/