Develop Reference

Bootstrap 5 carousel with collapse on slide event

I am trying to get a bootstrap 5 carousel with collapse outside the carousel going but I'm stuck on the java script part. I am a absolute beginner and not sure how to solve this problem.
I made a console log to see if I have the carousel slides and yes this is working. I can get the collapse working. because of "SyntaxError: Document.querySelector: '[object HTMLDivElement]' is not a valid selector".
Any help would be appreciated.
document.getElementById("carouselExampleControls");
document.addEventListener("slide.bs.carousel", function (e) {
console.log(e.relatedTarget);
});
document.getElementById("carouselExampleControls");
document.addEventListener("slide.bs.carousel", function (e) {
var forSlide = document.querySelector(
".for-slide-" + document.querySelector(e.relatedTarget).index()
);
if (!forSlide.classList.contains("in")) {
document.querySelector("#collapseGroup>.collapse.in").collapse("hide");
forSlide.collapse("show");
}
});
#import url(https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css);
.img0 {
height: 300px;
width: 400px;
background-color: blue;
position: relative;
}
.img1 {
height: 300px;
width: 400px;
background-color: green;
position: relative;
}
.img2 {
height: 300px;
width: 400px;
background-color: red;
position: relative;
}
.img3 {
height: 300px;
width: 400px;
background-color: purple;
position: relative;
}
.description-group {
border: 1px solid red;
}
.textarea {
margin: 20px 50px;
color: black;
}
<div class="container mt-4">
<div class="row row-flex">
<div class="col-md-4">
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<a type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></a>
<a type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="1" aria-label="Slide 2"></a>
<a type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="2" aria-label="Slide 3"></a>
<a type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="3" aria-label="Slide 4"></a>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100 img0" alt="Slide 0">
<div class="carousel-caption d-none d-md-block">
<h5>Caption 0</h5>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100 img1" alt="Slide 1">
<div class="carousel-caption d-none d-md-block">
<h5>Caption 1</h5>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100 img2" alt="Slide 2">
<div class="carousel-caption d-none d-md-block">
<h5>Caption 2</h5>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100 img3" alt="Slide 3">
<div class="carousel-caption d-none d-md-block">
<h5>Caption 3</h5>
</div>
</div>
</div>
<!-- Controls -->
<a class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
</div>
<div class="col-md-8 description-group">
<div id="collapseGroup">
<div class="collapse for-slide-0 in">
<div class="card card-body">
<div class="textarea">
<h3>Text for Slide 0</h3>
</div>
</div>
</div>
<div class="collapse for-slide-1">
<div class="card card-body">
<div class="textarea">
<h3>Text for Slides 1</h3>
</div>
</div>
</div>
<div class="collapse for-slide-2">
<div class="card card-body">
<div class="textarea">
<h3>Text for Slide 2</h3>
</div>
</div>
</div>
<div class="collapse for-slide-3">
<div class="card card-body">
<div class="textarea">
<h3>Text for Slide 3</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

You probably want to refer to the correct slide from carousel item. You can get index of current targetElement node using indexOf. However the collapse part still doesn't work need to fix the markup.
document.addEventListener("slide.bs.carousel", function(e) {
var child = e.relatedTarget
var index = [].indexOf.call(child.parentNode.children, child);
var forSlide = document.querySelector(".for-slide-" + index);
console.log("should show collapse " + forSlide.innerText.trim())
return;
// check your collapse code currently doesn't work
if (!forSlide.classList.contains("in")) {
document.querySelector("#collapseGroup>.collapse.show").collapse("hide");
forSlide.collapse("show");
}
});
#import url(https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css);
.img0 {
height: 300px;
width: 400px;
background-color: blue;
position: relative;
}
.img1 {
height: 300px;
width: 400px;
background-color: green;
position: relative;
}
.img2 {
height: 300px;
width: 400px;
background-color: red;
position: relative;
}
.img3 {
height: 300px;
width: 400px;
background-color: purple;
position: relative;
}
.description-group {
border: 1px solid red;
}
.textarea {
margin: 20px 50px;
color: black;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<div class="container mt-4">
<div class="row row-flex">
<div class="col-md-4">
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<a type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></a>
<a type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="1" aria-label="Slide 2"></a>
<a type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="2" aria-label="Slide 3"></a>
<a type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="3" aria-label="Slide 4"></a>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100 img0" alt="Slide 0">
<div class="carousel-caption d-none d-md-block">
<h5>Caption 0</h5>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100 img1" alt="Slide 1">
<div class="carousel-caption d-none d-md-block">
<h5>Caption 1</h5>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100 img2" alt="Slide 2">
<div class="carousel-caption d-none d-md-block">
<h5>Caption 2</h5>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100 img3" alt="Slide 3">
<div class="carousel-caption d-none d-md-block">
<h5>Caption 3</h5>
</div>
</div>
</div>
<!-- Controls -->
<a class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
</div>
<div class="col-md-8 description-group">
<div id="collapseGroup">
<div class="collapse for-slide-0 show in">
<div class="card card-body">
<div class="textarea">
<h3>Text for Slide 0</h3>
</div>
</div>
</div>
<div class="collapse for-slide-1">
<div class="card card-body">
<div class="textarea">
<h3>Text for Slides 1</h3>
</div>
</div>
</div>
<div class="collapse for-slide-2">
<div class="card card-body">
<div class="textarea">
<h3>Text for Slide 2</h3>
</div>
</div>
</div>
<div class="collapse for-slide-3">
<div class="card card-body">
<div class="textarea">
<h3>Text for Slide 3</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

Looking for partial word matches from an input field, I'm finding also results from HTML code. Why?

I created an input field to search for words or their partial matches. In this example, I'm using the word cool.
The issue is that after 1st found match, I'm seeing matches from the HTML code and can't figure it out why. If I'm trying to find matches for the 3rd time, everything gets stuck.
Can someone help me understand why it's happening this?
Is there a way to write this part of code differently?
if ($(this).html().match(r)) {
// console.log('this html match r is:' + ' ' + r);
var matches = $(this).html().match(r);
// loop through them
$.each(matches, function () {
occurrences.push(i);
console.log(occurrences);
});
// wrap each found search term with our `found` span to highlight it
$(this).html($(this).html().replace(r, '<span class="found">$1</span>'));
}
document.addEventListener("DOMContentLoaded", function() {
let btn = document.querySelector('#findWord');
btn.addEventListener('click', function(){
let occurrences = [];
$('.timeline-type__content ul > li > a > .reports-list-item__title--compendium').each(function (i) {
// create a regexp from our term
const word = document.getElementById("searchedWord").value; // Eg: "cool"
const allCharacters = word.split(""); // ["c", "o", "o", "l"]
// Optional: remove duplicate characters:
const characterSet = new Set(allCharacters);
const uniqueCharacters = [...characterSet]; // ["c", "o", "l"]
const pattern = `(${uniqueCharacters.join("|")})`; // c|o|l
const r = new RegExp(pattern, "ig"); // /(c|o|l)/ig
if ($(this).html().match(r)) {
// console.log('this html match r is:' + ' ' + r);
var matches = $(this).html().match(r);
// loop through them
$.each(matches, function () {
occurrences.push(i);
console.log(occurrences);
});
// wrap each found search term with our `found` span to highlight it
$(this).html($(this).html().replace(r, '<span class="found">$1</span>'));
}
});
let lengthOccurrences = occurrences.length;
console.log('Number of occurrences is:' + ' ' + lengthOccurrences);
let currViewMatch = Number(document.querySelector('#current').textContent);
console.log('Number of current viewed match is:' + ' ' + currViewMatch);
// if we are currently viewing a match, increment so we move to the next one
currViewMatch = currViewMatch > 0 ? currViewMatch + 1 : 0;
// if the incremented number is higher than the number of matches, reset it to 0
currViewMatch = currViewMatch > lengthOccurrences ? 1 : currViewMatch;
// if this is the first click and we found matches, set current to the first match
currViewMatch = currViewMatch == 0 && lengthOccurrences > 0 ? 1 : currViewMatch;
let insertNbrOcc = lengthOccurrences > 0 ? ' of ' + lengthOccurrences : ' matches found in document';
// set number of matches found
let count = document.querySelector('#count');
count.textContent = insertNbrOcc;
// console.log(count);
// set number of currently viewed match
let nbrViewMatch = document.querySelector('#current');
nbrViewMatch.textContent = currViewMatch;
// console.log(insertTxtViewMatch);
if(currViewMatch != 0){
// open the section holding the currently viewed match using the indexes we stored earlier
$('.timeline-compendium__content').eq(occurrences[currViewMatch - 1]).collapse('show');
$('.timeline-type .timeline-type__content').eq(occurrences[currViewMatch - 1]).collapse('show');
}
});
});
.found {
background-color: yellow;
}
#labels {
margin-left: 15px;
font-size: 16px;
}
.timeline-compendium {
margin-left: 2rem;
}
.timeline-type__header {
width: 400px;
height: 50px;
background-color: rgb(46, 177, 100);
display: flex;
align-items: center;
justify-content: center;
color: white;
border: 1px solid white;
}
.timeline-type__header:hover {
color: white;
background-color: rgb(35, 119, 70);
}
#tab-content {
border: 1px solid red;
}
input[type=text] {
width: 80%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
/* input[type=text]:focus {
outline: 3px solid rgb(87, 163, 214);
} */
input#findWord {
background-color: rgb(248, 211, 3);
/* Green */
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
.form-control.success input {
border-color: #2ecc71;
}
.form-control.error input {
border-color: #e74c3c;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<!-- HTML CODE -->
<div class="container">
<div class="row">
<div class="col-sm-12">
<!-- <form id="searchForm" name="searchForm"> -->
<label for="searchedWord">Search</label>
<div>
<input type="text" id="searchedWord" placeholder="search.." aria-labelledby="searchedWord"/>
<button type="submit" id="findWord" value="Find">Find</button>
</div>
<!-- </form> -->
</div>
<div class="col-sm-6">
<div id="labels">
<span id="current"></span>
<span id="count"></span>
<span id="message"></span>
</div>
</div>
</div>
<div class="row">
<div class="col">
<section class="timeline-compendium">
<a class="btn timeline-compendium__header" data-toggle="collapse" href="#introduction" role="button"
aria-expanded="true" aria-controls="introduction">
<div class="row align-items-center">
<div class="col-auto">Foreword</div>
<div class="col"><span></span></div>
<div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand"
data-delay="400" aria-hidden="true" data-original-title="Collapse/expand"></em><span
class="sr-only">Collapse/expand
this item</span></div>
</div>
</a>
<div class="timeline-compendium__content collapse" id="introduction">
<div class="timeline-type">
<a data-toggle="collapse" href="#foreword" role="button" aria-expanded="false" aria-controls="foreword">
<div class="row no-gutters align-items-center">
<div class="col">
<div class="timeline-type__header timeline-type__header--title">
<div class="row align-items-center">
<div class="col-auto timeline-type__chapter">Foreword</div>
<div class="col timeline-type__title">Foreword</div>
<div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip"
title="Collapse/expand" data-delay="400" aria-hidden="true"></em><span
class="sr-only">Collapse/expand this
item</span>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="timeline-type__content collapse" id="foreword">
<ul class="reports-list">
<li>
<a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
<div class="col-auto reports-list-item__chapter reports-list-item__chapter--pdf">
<em class="icon-file-pdf" data-toggle="tooltip" title="Summary" data-delay="400"
aria-hidden="true"></em>Foreword
</div>
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">
Foreword cool
</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link"
data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- section 2 -->
<section class="timeline-compendium">
<a class="btn timeline-compendium__header collapsed" data-toggle="collapse" href="#titleA" role="button"
aria-expanded="false" aria-controls="titleA">
<div class="row align-items-center">
<div class="col-auto">Title A</div>
<div class="col"><span>SUMMARY</span></div>
<div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand"
data-delay="400" aria-hidden="true" data-original-title="Collapse/expand"></em><span
class="sr-only">Collapse/expand
this item</span></div>
</div>
</a>
<div class="timeline-compendium__content collapse" id="titleA">
<div class="timeline-type"><a class="accordion" data-toggle="collapse" href="#summary" role="button"
aria-expanded="false" aria-controls="summary" class="collapsed">
<div class="row no-gutters align-items-center">
<div class="col">
<div class="timeline-type__header timeline-type__header--title">
<div class="row align-items-center">
<div class="col-auto timeline-type__chapter">A</div>
<div class="col timeline-type__title">Summary</div>
<div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip"
title="Collapse/expand" data-delay="400" aria-hidden="true"></em><span
class="sr-only">Collapse/expand
this item</span>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="timeline-type__content collapse" id="summary">
<ul class="reports-list">
<li><a href="/en/secgen/courtsecretariat/Decisions/sommaire_en.pdf?d=wd815d51ad20c480292bc796688fd10d2&csf=1&e=XIu0Q9"
target="_blank" class="reports-list-item reports-list-item--compendium">
<div class="col-auto reports-list-item__chapter reports-list-item__chapter--pdf">
<em class="icon-file-pdf" data-toggle="tooltip" title="Summary" data-delay="400"
aria-hidden="true"></em>A
</div>
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">
Summary not cool
</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link"
data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- section 3 -->
<section class="timeline-compendium"><a class="btn timeline-compendium__header collapsed" data-toggle="collapse"
href="#titleB" role="button" aria-expanded="false" aria-controls="titleB">
<div class="row align-items-center">
<div class="col-auto">Title B</div>
<div class="col"><span>The Institution, the Court, operational procedures, the Members</span>
</div>
<div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand"
data-delay="400" aria-hidden="true"></em><span class="sr-only">Collapse/expand
this item</span></div>
</div>
</a>
<div class="timeline-compendium__content collapse" id="titleB">
<div class="timeline-type"><a data-toggle="collapse" href="#chapterB0" role="button" aria-expanded="false"
aria-controls="chapterB0" class="collapsed">
<div class="row no-gutters align-items-center">
<div class="col">
<div class="timeline-type__header timeline-type__header--title">
<div class="row align-items-center">
<div class="col-auto timeline-type__chapter">Chapter B 0</div>
<div class="col timeline-type__title">Treaties on European Union</div>
<div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip"
title="Collapse/expand" data-delay="400" aria-hidden="true"></em><span
class="sr-only">Collapse/expand
this item</span>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="timeline-type__content collapse" id="chapterB0">
<ul class="reports-list">
<li><a class="reports-list-item reports-list-item--compendium">
<div class="col reports-list-item__chapter">B 0</div>
<div class="col-auto reports-list-item__title reports-list-item__title--nolink">
Treaties on European Union
</div>
</a>
</li>
<li><a href="/en/secgen/courtsecretariat/Decisions/b01.pdf?d=wa9cc5281eeb347718865a52bf6c67efb&csf=1&e=zyPEtD"
target="_blank" class="reports-list-item reports-list-item--compendium">
<div class="col reports-list-item__chapter reports-list-item__chapter--pdf"><em
class="icon-file-pdf" data-toggle="tooltip"
title="Status of the Court / Revision of Article 4 of the EEC Treaty"
data-delay="400" aria-hidden="true"></em>B 0.1
</div>
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">
Status of the Court / Revision of Article 4 of the EEC Treaty cool
</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link"
data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
<li><a href="/en/secgen/courtsecretariat/Decisions/b02.pdf?d=w93c3d23dbdc04bcda16c5be9151c183a&csf=1&e=yaoQwr"
target="_blank" class="reports-list-item reports-list-item--compendium">
<div class="col reports-list-item__chapter reports-list-item__chapter--pdf"><em
class="icon-file-pdf" data-toggle="tooltip"
title="Obligations deriving from the Treaty on European Union" data-delay="400"
aria-hidden="true"></em>B 0.2
</div>
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">
Obligations deriving from the Treaty on European Union
</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link"
data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
<li><a href="/en/secgen/courtsecretariat/Decisions/b03.pdf?d=w56410e2b1b9f4ee2af9278081fc1d2c6&csf=1&e=BXz2wy"
target="_blank" class="reports-list-item reports-list-item--compendium">
<div class="col reports-list-item__chapter reports-list-item__chapter--pdf"><em
class="icon-file-pdf" data-toggle="tooltip" title="The Court's name"
data-delay="400" aria-hidden="true"></em>B 0.3
</div>
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">
The Court's name
</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link"
data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
</ul>
</div>
</div>
<div class="timeline-type"><a data-toggle="collapse" href="#chapterB1" role="button" aria-expanded="false"
aria-controls="chapterB1" class="collapsed">
<div class="row no-gutters align-items-center">
<div class="col">
<div class="timeline-type__header timeline-type__header--title">
<div class="row align-items-center">
<div class="col-auto timeline-type__chapter">Chapter B 1</div>
<div class="col timeline-type__title">The Court's operational procedures
</div>
<div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip"
title="Collapse/expand" data-delay="400" aria-hidden="true"></em><span
class="sr-only">Collapse/expand
this item</span>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="timeline-type__content collapse" id="chapterB1">
<ul class="reports-list">
<li><a class="reports-list-item reports-list-item--compendium">
<div class="col-auto reports-list-item__chapter">B 1.0</div>
<div class="col reports-list-item__title reports-list-item__title--nolink">The
Court's structure
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="timeline-type"><a data-toggle="collapse" href="#chapterB2" role="button" aria-expanded="false"
aria-controls="chapterB2" class="collapsed">
<div class="row no-gutters align-items-center">
<div class="col">
<div class="timeline-type__header timeline-type__header--title">
<div class="row align-items-center">
<div class="col-auto timeline-type__chapter">Chapter B 2</div>
<div class="col timeline-type__title">Members of the Court
</div>
<div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip"
title="Collapse/expand" data-delay="400" aria-hidden="true"></em><span
class="sr-only">Collapse/expand
this item</span>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="timeline-type__content collapse" id="chapterB2">
<ul class="reports-list">
<li><a class="reports-list-item reports-list-item--compendium">
<div class="col-auto reports-list-item__chapter">B 2.1</div>
<div class="col reports-list-item__title reports-list-item__title--nolink">Code
of conduct for the members and former members of the Court
</div>
</a>
</li>
<li><a href="#" class="reports-list-item reports-list-item--compendium">
<div class="col reports-list-item__chapter reports-list-item__chapter--pdf"><em
class="icon-file-pdf" data-toggle="tooltip"
title="Code of conduct for the Members and former Members of the Court"
data-delay="400" aria-hidden="true"></em>B 2.1.1
</div>
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">
Code of conduct for the Members and former Members of the Court - Cool
</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link"
data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
</div>
</div>
</div>

(This was too long for a comment, maybe already helps you solve the issue)
You call $(this).html().match(r); to find matching words. Of course this will match occurences in the HTML. If you search for example "class" or "section". The HTML itself is matched there.
You should loop through HTML elements which are text nodes and call your .match(r) on each of them. Otherwise it will find tags, attributes and values in the attributes as well.
Taken from this answer: How do I select text nodes with jQuery:
$(elem).contents().filter(function() { return this.nodeType == Node.TEXT_NODE; });
In the code which replaces matches, you write $(this).html($(this).html().replace( ... - you can change this to $(this).html($(this).text().replace( ... if you only go through the text nodes and be safe there is no HTML there.

Bootstrap Collapse menu not collapsing in page load

i used two different menu for desktop and mobile. when i go in mobile view collapse menu is not working.I use:
$(".navbar-collapse").collapse('hide');
After using this on page load it shows first then hide.
Here is my mobile menu code:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="top-header">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header pull-left" style="margin-left:5px">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<a href="http://localhost/eboighar/" class="logo-mini">
<img src="http://localhost/eboighar/img/eboi-s-logo.png" alt="Eboighar Small Logo">
</a>
<div class="pull-right cart-mview-top">
<a id="cart_at_head2" class="pull-right">
<div class="total" style="margin-top:10px;">
<span style="color: #666666;font-size: 14px;margin-top: 13px;padding-right: 5px;" id="headeritems3">0</span>
</div>
<img src="http://localhost/eboighar/img/cart.png" style="margin-right:5px;border-left: 1px solid #b3b3b3; margin-top: 0px;padding-left: 5px;" alt="cart">
</a>
<!-- <img class="header-busket" src="asset/busket.png"/> -->
<div id="cart-sumary2" class=" col-xs-12 m-tab-view" style="display : none;background:#fafafa;">
<div class="cart-sumary2-mobile" style="background:#fafafa;">
<h4 class="txt-blue" style="text-align:center">Cart Summary</h4>
<img id="close_cart_up2" class="close-cart" src="http://localhost/eboighar/img/minus.png" alt="eboighar Ico" style="position: absolute;top:15px; right:15px; height:16px;">
<div>
<div class="padding-10" id="cart_item_holder2">
<div class="bg-fa">
<div id="cart_product_list2" class="mCustomScrollbar _mCS_2 mCS-autoHide mCS_no_scrollbar"><div id="mCSB_2" class="mCustomScrollBox mCS-dark mCSB_vertical mCSB_inside" style="max-height: 300px;" tabindex="0"><div id="mCSB_2_container" class="mCSB_container mCS_y_hidden mCS_no_scrollbar_y" style="position:relative; top:0; left:0;" dir="ltr"><div class="btm-border-sum no_item"><strong>You Cart is empty</strong>
<div class="clear_both"></div>
</div></div><div id="mCSB_2_scrollbar_vertical" class="mCSB_scrollTools mCSB_2_scrollbar mCS-dark mCSB_scrollTools_vertical" style="display: none;"><div class="mCSB_draggerContainer"><div id="mCSB_2_dragger_vertical" class="mCSB_dragger" style="position: absolute; min-height: 30px; top: 0px;" oncontextmenu="return false;"><div class="mCSB_dragger_bar" style="line-height: 30px;"></div></div><div class="mCSB_draggerRail"></div></div></div></div></div>
<div id="price_and_button2" style="display: none;">
<div class="pull-right" style="font-size:18px;">Total : Tk <font id="cart_list_total2" class="text-red">0.00</font></div>
<div class="clear_both"></div>
<div class="crt_btn_con ">
</div>
</div>
</div>
</div>
</div>
</div><!-- End of Cart Summery. -->
</div>
<div class="clearfix"> </div>
</div>
</div>
<div stylle="clear:both; margin:0 5px;">
<form class="menu-search-frm" role="search" action="http://localhost/eboighar/index.php/index/searchbookview_m/" method="post" onsubmit="return submfrom_2(0)" name="searchForm_2" id="searchForm_2">
<div class="form-group menu-top-search">
<div class="input-group" style="padding:0 6px;">
<input class="form-control" style="border:1px solid #ccc;background:#fff;" id="search2" name="search2" autocomplete="off" onkeyup="lookup_2(this.value,event);" value="" placeholder="Enter Book Title, Author or Publisher" type="text">
<div class="suggestionsBox" id="suggestions_2" style="display: none; position:absolute; z-index:999999999999999999;background:#fff;left: 27%;top:30px;">
<!-- <img src="http://localhost/eboighar/images/view/upArrow.png" style="position: relative; top: -10px; left: 30px;" alt="upArrow" /> -->
<div class="suggestionList" id="autoSuggestionsList_2" style="max-height:300px; overflow:auto">
</div>
</div>
<div class="input-group-btn">
<a style="border:0px;" class="btn btn-default add_serch glyphicon glyphicon-search" id="basic-addon2" href="javascript:submfrom_2(1); "> </a>
</div>
</div>
</div>
</form>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="m_menu_top_con" class="navbar-collapse collapse mobile-menu-top" aria-expanded="false">
<div style="clear:both"></div>
<a id="close_mobile_menu" class="close_mobile_menu btn pull-right" style=" margin: -6px -10px -3px;padding: 0;border:none !important"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>
<div style="clear:both"></div>
<ul class="nav navbar-nav ">
<li class="active">
<i class="glyphicon glyphicon-home ico-danger"></i> Home
</li>
<li>
<i class="glyphicon glyphicon-user ico-success"></i> About eBoighar
</li>
<li><span><img class="nav-2-ico_ac" src="http://localhost/eboighar/img/howtobuy.PNG" alt="Eboighar How to Buy"></span>How to buy books</li>
<li><i class=" glyphicon glyphicon-tasks ico-warning"></i> Order unlisted books</li>
<!-- <li><i class="glyphicon glyphicon-file ico-info"></i> Tutorials</li> -->
<li><i class="glyphicon glyphicon-gift ico-danger"></i> Bulk order</li>
<li><i class="glyphicon glyphicon-briefcase ico-success"></i> Medical equipment</li>
<li><i class="glyphicon glyphicon-print ico-info"></i> Printing & Binding </li>
<li>
<i class="glyphicon glyphicon-globe ico-warning"></i> News
</li>
<li>
<i class="glyphicon glyphicon-earphone ico-info"></i> Contact Us
</li>
</ul>
<div style="clear:both"></div>
<p class="log pull-right" style="margin-bottom:10px;">
<a class="" href="http://localhost/eboighar/index.php/index/login" style="font-size:12px; color:#000000; padding: 5px 7px;"><i class="glyphicon glyphicon-lock"></i>Login</a>
<a class="" href="http://localhost/eboighar/index.php/index/signup/" style="font-size:12px; color:#000000; padding: 5px 7px;"><i class="glyphicon glyphicon-user"></i>Signup</a>
</p>
</div><!-- /.navbar-collapse -->
</nav>
You can see problem Here : http://eboighar.com/
Some one help to solve this...

Can't get CSS list-group-horizontal to fill container and be centered

I am looking to get a container containing a row and then a list-group-horizontal group of items and ensure that it fills the entire HTML page horizontally, and is centered. Currently, these group items bunch to the left and do not fill the page horizontally until the screen size is very narrow, rescaling to lower width when the page is reduced in width.
Currently the result of the code is the following:
I want category 1, 2 and 3 to fill the page, and adjust when more categories are added.
/*!
* Start Bootstrap - Shop Homepage HTML Template (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
body {
padding-top: 70px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
.slide-image {
width: 100%;
}
.list-group-horizontal .list-group-item {
display: inline-block;
}
.list-group-horizontal .list-group-item {
margin-bottom: 0;
margin-left:-4px;
margin-right: 0;
}
.list-group-horizontal .list-group-item:first-child {
border-top-right-radius:0;
border-bottom-left-radius:4px;
}
.list-group-horizontal .list-group-item:last-child {
border-top-right-radius:4px;
border-bottom-left-radius:0;
}
.carousel-holder {
margin-bottom: 30px;
}
.carousel-control,
.item {
border-radius: 4px;
}
.caption {
height: 130px;
overflow: hidden;
}
.caption h4 {
white-space: nowrap;
}
.thumbnail img {
width: 100%;
}
.ratings {
padding-right: 10px;
padding-left: 10px;
color: #d17581;
}
.thumbnail {
padding: 0;
}
.thumbnail .caption-full {
padding: 9px;
color: #333;
}
footer {
margin: 50px 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Shop Homepage - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<!-- <link href="css/bootstrap.min.css" rel="stylesheet">-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Custom CSS -->
<link href="css/shop-homepage.css" rel="stylesheet">
<link href="css/dropdown.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<!-- Support paging via http://www.tutorialspoint.com/php/mysql_paging_php.htm-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">eBuy Platform</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
Your Profile
</li>
<li>
<!-- This should be dependent on your user type-->
Your Bids/Your Auctions
</li>
<li>
<!-- This should be depending on user type-->
Submit Auction
</li>
<li>
Logout
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="container">
<div class="row">
<div class="col-md-12" style="padding-top:50px">
<p class="lead">Username</p>
<div class="list-group list-group-horizontal">
Category 1
Category 2
Category 3
</div>
</div>
<!-- End of row of categories-->
</div>
</div>
<!-- Page Content -->
<div class="container">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="input-group" id="adv-search">
<input type="text" class="form-control" placeholder="Search for items" />
<div class="input-group-btn">
<div class="btn-group" role="group">
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="filter">Filter by</label>
<select class="form-control">
<option value="0" selected>All Snippets</option>
<option value="1">Featured</option>
<option value="2">Most popular</option>
<option value="3">Top rated</option>
<option value="4">Most commented</option>
</select>
</div>
<div class="form-group">
<label for="contain">Author</label>
<input class="form-control" type="text" />
</div>
<div class="form-group">
<label for="contain">Contains the words</label>
<input class="form-control" type="text" />
</div>
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</form>
</div>
</div>
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Start listings of auctions-->
<div class="col-md-9">
<!--
<div class="row carousel-holder" style="padding-top:50px">
<div class="col-md-12">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img class="slide-image" src="http://placehold.it/800x300" alt="">
</div>
<div class="item">
<img class="slide-image" src="http://placehold.it/800x300" alt="">
</div>
<div class="item">
<img class="slide-image" src="http://placehold.it/800x300" alt="">
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
-->
<div class="row" style="padding-top:50px">
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$24.99</h4>
<h4>First Auction
</h4>
<p>Description of product</p>
</div>
<div class="ratings">
<p class="pull-right">15 reviews</p>
<p>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$64.99</h4>
<h4>Second Auction
</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="ratings">
<p class="pull-right">12 reviews</p>
<p>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$74.99</h4>
<h4>Third Auction
</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="ratings">
<p class="pull-right">31 reviews</p>
<p>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$84.99</h4>
<h4>Fourth Auction
</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="ratings">
<p class="pull-right">6 reviews</p>
<p>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$94.99</h4>
<h4>Fifth Auction
</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="ratings">
<p class="pull-right">18 reviews</p>
<p>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</p>
</div>
</div>
</div>
<!--
<div class="col-sm-4 col-lg-4 col-md-4">
To be filled out
</div>
-->
</div>
</div>
</div>
</div>
<!-- /.container -->
<div class="container">
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Your Website 2014</p>
</div>
</div>
</footer>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

.Here where you have <!--Start listings of auctions--> .col-md-9, change to .col-md-12
Update:
Add to .list-group-horizontal .list-group-item this:
width:33.3%;
text-align:center
Snippet
/*!
* Start Bootstrap - Shop Homepage HTML Template (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
body {
padding-top: 70px;
/* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
.slide-image {
width: 100%;
}
.list-group-horizontal .list-group-item {
display: inline-block;
width:33.3%;
text-align:center
}
.list-group-horizontal .list-group-item {
margin-bottom: 0;
margin-left: -4px;
margin-right: 0;
}
.list-group-horizontal .list-group-item:first-child {
border-top-right-radius: 0;
border-bottom-left-radius: 4px;
}
.list-group-horizontal .list-group-item:last-child {
border-top-right-radius: 4px;
border-bottom-left-radius: 0;
}
.carousel-holder {
margin-bottom: 30px;
}
.carousel-control,
.item {
border-radius: 4px;
}
.caption {
height: 130px;
overflow: hidden;
}
.caption h4 {
white-space: nowrap;
}
.thumbnail img {
width: 100%;
}
.ratings {
padding-right: 10px;
padding-left: 10px;
color: #d17581;
}
.thumbnail {
padding: 0;
}
.thumbnail .caption-full {
padding: 9px;
color: #333;
}
footer {
margin: 50px 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<!-- Support paging via http://www.tutorialspoint.com/php/mysql_paging_php.htm-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">eBuy Platform</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
Your Profile
</li>
<li>
<!--This should be dependent on your user type-->
Your Bids/Your Auctions
</li>
<li>
<!-- This should be depending on user type-->
Submit Auction
</li>
</ul>
<!-- /.navbar-collapse -->
</div>
</div>
<!-- /.container -->
</nav>
<div class="container">
<div class="row">
<div class="col-md-12" style="padding-top:50px">
<p class="lead">Username</p>
<div class="list-group list-group-horizontal">
Category 1
Category 2
Category 3
</div>
</div>
<!-- End of row of categories-->
</div>
</div>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="input-group" id="adv-search">
<input type="text" class="form-control" placeholder="Search for items" />
<div class="input-group-btn">
<div class="btn-group" role="group">
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span>
</button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="filter">Filter by</label>
<select class="form-control">
<option value="0" selected>All Snippets</option>
<option value="1">Featured</option>
<option value="2">Most popular</option>
<option value="3">Top rated</option>
<option value="4">Most commented</option>
</select>
</div>
<div class="form-group">
<label for="contain">Author</label>
<input class="form-control" type="text" />
</div>
<div class="form-group">
<label for="contain">Contains the words</label>
<input class="form-control" type="text" />
</div>
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
</form>
</div>
</div>
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Start listings of auctions-->
<div class="col-md-12">
<div class="row" style="padding-top:50px">
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$24.99</h4>
<h4>First Auction
</h4>
<p>Description of product</p>
</div>
<div class="ratings">
<p class="pull-right">15 reviews</p>
<p>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$64.99</h4>
<h4>Second Auction</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="ratings">
<p class="pull-right">12 reviews</p>
<p>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$74.99</h4>
<h4>Third Auction
</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="ratings">
<p class="pull-right">31 reviews</p>
<p>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$84.99</h4>
<h4>Fourth Auction
</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="ratings">
<p class="pull-right">6 reviews</p>
<p>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<h4 class="pull-right">$94.99</h4>
<h4>Fifth Auction
</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="ratings">
<p class="pull-right">18 reviews</p>
<p>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</p>
</div>
</div>
</div>
<!--
<div class="col-sm-4 col-lg-4 col-md-4">
To be filled out
</div>
-->
</div>
</div>
<!-- /.container -->
<div class="container">
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Your Website 2014</p>
</div>
</div>
</footer>
</div>
<!-- /.container -->

Angularjs getting a 404 on image urls set in controller

ok i have been working on this issue for a week now and i cant figure it out.
im working on a site built on angularjs and we load info from json files stored on the sever all this works but when the page loads for some reason one of the image tags always send off a 404 error but then it all loads fine
Example of error
GET http://localhost:3000/angular/::%20listp.titlePicture.urls[0].url[3].href%20%7C%20srcFill%20:%20%7Bwidth:447,height:351%7D%20:: 404 (Not Found) index.html:1
i have manually checked all 27 entries in the json file and titlePicture.urls[0].url[3].href is set for all of them
anyone have any ideas? the page can been seen here http://www.relaunch.bsf-immobilien.de/#/wohnen
this is the relevant ng-repeat code
<div class="col-md-4 col-ms-6 col-sm-4 col-xs-12" ng-repeat="listp in filteredtodos | unique:'id'">
<div class="panel panel-default relative" style="width: 100%; height:380px; padding-bottom: 15px; float: left; box-sizing: border-box;">
<div class="ribbon-heading ribbon-default inline absolute left margin-none">
<span ng-show="listp.xsitype == 'OfferApartmentBuy'">Wohnung zum Kaufen</span>
<span ng-show="listp.xsitype == 'OfferHouseBuy'">Haus zum Kaufen</span>
<span ng-show="listp.xsitype == 'OfferApartmentRent'">Wohnung zum Mieten</span>
<span ng-show="listp.xsitype == 'OfferHouseRent'">Haus zum Mieten</span>
<span ng-show="listp.xsitype == 'OfferShortTermAccommodation'">Wohnen auf Zeit</span>
</div>
<div class="cover hover overlay margin-none" style="max-height: 250px;">
<a href="#/wohnen/::listp.id::">
<img src=":: listp.titlePicture.urls[0].url[3].href | srcFill : {width:447,height:351} ::" alt="::listp.title::" class="img-responsive" style="width: 100%; height: auto; display: block; margin-left: auto; margin-right: auto;">
</a>
<a href="#/wohnen/::listp.id::" class="overlay overlay-full overlay-bg-black overlay-hover" style="height: 143px;">
<span class="v-center">
<span class="btn btn-circle btn-white btn-lg"><i class="fa fa-eye"></i></span>
</span>
</a>
</div>
<div class="panel-body">
<h4 class="margin-v-0-5">::listp.title::</h4>
<p><span ng-show="listp.xsitype == 'OfferApartmentBuy'">Kaufpreis: </span>
<span ng-show="listp.xsitype == 'OfferApartmentRent'">Miete: </span>
<span ng-show="listp.xsitype == 'OfferHouseBuy'">Kaufpreis: </span>
<span ng-show="listp.xsitype == 'OfferHouseRent'">Miete: </span> ::listp.price.value | currency:'EUR' ::
<a href="#/wohnen/::listp.id::">
<button class="btn btn-primary btn-lg absolute bottom btn-circle right" style="margin-bottom:10px; margin-right:10px;"><i class="fa fa-arrow-right"></i></button>
</a>
</p>
</div>
</div>
</div>

try to use ng-src instead of src, moreover one-way binding :: doesn't need to be called twice in expression :
<img ng-src="::listp.titlePicture.urls[0].url[3].href" ... />

The issue seems to be with your URL:
<img src=":: listp.titlePicture.urls[0].url[3].href | srcFill : {width:447,height:351} ::" alt="::listp.title::" class="img-responsive" style="width: 100%; height: auto; display: block; margin-left: auto; margin-right: auto;"></a>
It seems you really want to access the value of an array listp.titlePicture.urls[0].url[3].href right?
In that case better mark it as an angular Expression, as follows:
I have corrected it in the following code:
<div class="col-md-4 col-ms-6 col-sm-4 col-xs-12" ng-repeat="listp in filteredtodos | unique:'id'">
<div class="panel panel-default relative" style="width: 100%; height:380px; padding-bottom: 15px; float: left; box-sizing: border-box;">
<div class="ribbon-heading ribbon-default inline absolute left margin-none">
<span ng-show="listp.xsitype == 'OfferApartmentBuy'">Wohnung zum Kaufen</span>
<span ng-show="listp.xsitype == 'OfferHouseBuy'">Haus zum Kaufen</span>
<span ng-show="listp.xsitype == 'OfferApartmentRent'">Wohnung zum Mieten</span>
<span ng-show="listp.xsitype == 'OfferHouseRent'">Haus zum Mieten</span>
<span ng-show="listp.xsitype == 'OfferShortTermAccommodation'">Wohnen auf Zeit</span>
</div>
<div class="cover hover overlay margin-none" style="max-height: 250px;">
<a href="#/wohnen/::listp.id::">
<img src=":: {{listp.titlePicture.urls[0].url[3].href}} | srcFill : {width:447,height:351} ::" alt="::listp.title::" class="img-responsive" style="width: 100%; height: auto; display: block; margin-left: auto; margin-right: auto;">
</a>
<a href="#/wohnen/::listp.id::" class="overlay overlay-full overlay-bg-black overlay-hover" style="height: 143px;">
<span class="v-center">
<span class="btn btn-circle btn-white btn-lg"><i class="fa fa-eye"></i></span>
</span>
</a>
</div>
<div class="panel-body">
<h4 class="margin-v-0-5">::listp.title::</h4>
<p><span ng-show="listp.xsitype == 'OfferApartmentBuy'">Kaufpreis: </span>
<span ng-show="listp.xsitype == 'OfferApartmentRent'">Miete: </span>
<span ng-show="listp.xsitype == 'OfferHouseBuy'">Kaufpreis: </span>
<span ng-show="listp.xsitype == 'OfferHouseRent'">Miete: </span> ::listp.price.value | currency:'EUR' ::
<a href="#/wohnen/::listp.id::">
<button class="btn btn-primary btn-lg absolute bottom btn-circle right" style="margin-bottom:10px; margin-right:10px;"><i class="fa fa-arrow-right"></i></button>
</a>
</p>
</div>
</div>
</div>
Hope this works fine for you..