We Keep Coding

Debugging Show More Show Less button - Missing Paragraphs of Text

There a 'load more/load less' function running on this page which I'm attempting to debug. https://maes-mynan.cogitoprojectx.com/holiday-homes/the-llewellyn-lodge-lodge/
You can see it the section with the heading "More About The Llewellyn Lodge"
The text is displayed via an Advanced Custom Fields WYSIWYG field [WordPress].
I've been playing around with numbers in lines i.e. .length>4 with no effect.
As far as I can see, the code is set to truncate the text after the fourth paragraph and on-click show the full text. However, instead of just truncating the text, it seems to remove the fourth paragraph entirely.
In essence, it displays paragraphs 1 - 3, [misses 4] and then displays paragraph 5 onwards.
I've been changing the value of the number in line e.g. .length>4 with no effect.
Any help, to stop the paragraph disappearing entirely will be gratefully appreciated.
jQuery(document).ready(function() {
jQuery('.read-more2').each(function() {
if (jQuery(this).children('p').length > 4) {
jQuery(this).children('p:lt(3)').show();
jQuery(this).append('<button class="loadMore btn btn-primary">Show More</button>');
}
});
jQuery('.read-more2').on("click", '.loadMore', function() {
jQuery(this).parent('.read-more2').children('p:gt(3)').show(); // use gt instead of lt
jQuery(this).removeClass('loadMore').addClass('loadLess').text('Show Less');
});
jQuery('.read-more2').on("click", '.loadLess', function() {
jQuery(this).parent('.read-more2').children('p:gt(3)').hide(); // use gt instead of lt
jQuery(this).removeClass('loadLess').addClass('loadMore').text('Show More');
});
});

Assuming the reason for SHOWING initially is that all p's are hidden, we need to hide the gt(2) when we toggle.
the code could be shortened by having the button use .toggle(this.textContent==='Show More') instead of having two event handlers and two class names
$(document).ready(function() {
$('.read-more2').each(function() {
if ($(this).children('p').length > 4) {
$(this).children('p:lt(3)').show(); // because they were hidden
$(this).append('<button class="loadMore btn btn-primary">Show More</button>');
}
});
$('.read-more2').on("click", '.loadMore', function() {
$(this).parent('.read-more2').children('p').show(); // use p to show all
$(this).removeClass('loadMore').addClass('loadLess').text('Show Less');
});
$('.read-more2').on("click", '.loadLess', function() {
$(this).parent('.read-more2').children('p:gt(2)').hide(); // use gt 2 instead
$(this).removeClass('loadLess').addClass('loadMore').text('Show More');
});
});
.read-more2 > p { display:none }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="read-more2">
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
</div>
<div class="read-more2">
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
</div>
$(document).ready(function() {
$('.read-more-spec').each(function() {
if ($(this).find('ul li').length > 4) {
$(this).find('ul li:lt(3)').show(); // because they were hidden
$(this).append('<button class="loadMore btn btn-primary">Show More</button>');
}
});
$('.read-more-spec').on("click", '.loadMore', function() {
$(this).parent('.read-more-spec').find('ul li').show(); // use p to show all
$(this).removeClass('loadMore').addClass('loadLess').text('Show Less');
});
$('.read-more-spec').on("click", '.loadLess', function() {
$(this).parent('.read-more-spec').find('ul li:gt(2)').hide(); // use gt 2 instead
$(this).removeClass('loadLess').addClass('loadMore').text('Show More');
});
});
.read-more-spec ul li { display:none }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6 read-more-spec black">
<h3>LODGE FEATURES</h3>
<div>
<ul>
<li>Vaulted ceiling to lounge, kitchen and diner</li>
<li>Two sets of French doors to the front elevation</li>
<li>Overhanging eaves with discreet lighting to the external front elevation</li>
<li>Colour coordinated curtains, blinds and carpets</li>
<li>Fully fitted country style kitchen with four burner gas hob, built under oven and integrated dishwasher and fridge/freezer</li>
<li>Centre island/breakfast bar with two high backed chairs</li>
<li>Utility cupboard with under counter washing machine, condensing dryer, hooks, shelves and boot drying area under boiler</li>
<li>Solid wood dining table top with four painted white chairs</li>
<li>One large comfortable sofa and two armchairs – both in a classical design</li>
<li>Coffee table and lamp table also feature in the lounge area</li>
<li>Fireplace mantel and, electric log burner style fire</li>
<li>5ft King sized bed in master bedroom with gas lift under-bed storage</li>
<li>Freestanding bedroom furniture which includes large wardrobe, mirror, dressing table, dressing stool and bedside tables</li>
<li>Ensuite bathroom with tiled corner shower and heated towel rail</li>
<li>Bath in main bathroom with overhead shower and heated towel rail</li>
<li>Wall mirrors in both bathrooms</li>
<li>TV points in lounge and master bedroom</li>
<li>Energy efficient A Rated boiler with radiators and central heating throughout</li>
<li>Built to British Standard 3632 – residential specification</li>
<li>Timber frame structure</li>
<li>10 year structural warranty</li>
<li>Horizontal Sierra Canexel Cladding to the exterior for easy maintenance</li>
<li>Anthracite grey UPVC double glazed doors and windows</li>
<li>Large decking in complementing grey composite board and handrail with two lockable gates (ideal for dog owners) to front and side. Steps down into the side garden area</li>
<!-- <button class="loadMore btn btn-primary">Show More</button> -->
</ul>
</div>

JavaScript toggle one at a time

I need some help with toggling one question at time. I want to display one question and when I click the other question the old one will disappear.
Heading
Here is my code
I am not sure how to get them to show up one at a time I have tried many different ways and still haven't came up with anything.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FAQs</title>
<link rel="stylesheet" href="main.css">
<script src="faqs.js"></script>
</head>
<body>
<main id="faqs">
<h1>JavaScript FAQs</h1>
<h2><a href="#" >What is JavaScript?</a></h2>
<div>
<p>JavaScript is a is a browser-based programming language
that makes web pages more responsive and saves round trips to the
server.
</p>
</div>
<h2>What is jQuery?</h2>
<div>
<p>jQuery is a library of the JavaScript functions that you're most
likely
to need as you develop websites.
</p>
</div>
<h2>Why is jQuery becoming so popular?</h2>
<div>
<p>Three reasons:</p>
<ul>
<li>It's free.</li>
<li>It lets you get more done in less time.</li>
<li>All of its functions are cross-browser compatible.</li>
</ul>
</div>
</main>
</body>
</html>
:
"use strict";
var $ = function(id) { return document.getElementById(id); };
// the event handler for the click event of each h2 element
var toggle = function() {
var h2 = this;
// clicked h2 tag
var div = h2.nextElementSibling;
// h2 tag's sibling div tag
// toggle plus and minus image in h2 elements by adding or removing a class
if (h2.hasAttribute("class")) {
h2.removeAttribute("class");
} else {
h2.setAttribute("class", "minus");
}
//toggle div visibility by adding or removing a class
if (div.hasAttribute("class")) {
div.removeAttribute("class");
} else {
div.setAttribute("class", "open");
}
};

Do as follows:
Hide all the answers initially with CSS
Save questions and answers to the variables in JS file
Add function which is executed when any of the questions is clicked
Hide all the answers
Show the answer related to the clicked question
var questions = $("h2 a");
var answers = $("h2 + div");
questions.on("click", function(event) {
event.preventDefault();
var answer = $($(this).attr("href"));
answers.hide();
answer.show();
});
h2 + div {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main id="faqs">
<h1>JavaScript FAQs</h1>
<h2><a href="#q1" >What is JavaScript?</a></h2>
<div id="q1">
<p>JavaScript is a is a browser-based programming language
that makes web pages more responsive and saves round trips to the
server.
</p>
</div>
<h2>What is jQuery?</h2>
<div id="q2">
<p>jQuery is a library of the JavaScript functions that you're most
likely
to need as you develop websites.
</p>
</div>
<h2>Why is jQuery becoming so popular?</h2>
<div id="q3">
<p>Three reasons:</p>
<ul>
<li>It's free.</li>
<li>It lets you get more done in less time.</li>
<li>All of its functions are cross-browser compatible.</li>
</ul>
</div>
</main>

Fade in Div's on scroll jQuery

I'm been researching online for a while no on how to make div's fade in as you scroll. I've watched/ read several tutorials and none seem to be working quite right. It either doesn't work at all, or the Div's turn invisible completely and don't load. I don't know if it's an issue with my code, or the method is not correct. Is there a better solution to having DIV's fade in on scrolling down?
Heres a jsfiddle: https://jsfiddle.net/0zvrjg9b/
Heres the Github: https://github.com/Darkstar93/Resume
Thanks for the help
$(function() {
$(window).scroll( function(){
$('#fadeInBlock').each( function(i){
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* Adjust the "200" to either have a delay or that the content starts fading a bit before you reach it */
bottom_of_window = bottom_of_window + 200;
if( bottom_of_window > bottom_of_object ){
$(this).animate({'opacity':'1'},500);
}
});
});
});
/* Load scroll */
.fadeInBlock {
opacity: 0;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="xp">
<h1 id="work">Work Experience</h1>
<div class="sprintxp" id="fadeInBlock">
<img alt="sprintlogo" id="sprintlogo" src="images/sprint.png">
<p id="jobs">Technical Consultant</p>
<p id="dates">December 2014 - December 2015</p>
<ul class="sprintul">
<li>Performed software and hardware repairs on devices which
reduced phone replacements.</li>
<li>Conducted inventory checks which resulted in lowering the
accessory, and device, discrepancies.</li>
<li>Maintained near-perfect customer satisfaction scores for
entirety of employment.</li>
<li>Established a base of loyal customer clientele allowing me
to consistently surpass quotas.</li>
<li>Utilized in store sales systems such as SalesForce to close
transactions and create opportunities.</li>
<li>Adapted quickly to new technological innovations within the
cell phone industry and memorized new company promotional plans
on a monthly basis, resulting in less churn rate and high
customer satisfaction.</li>
</ul>
</div>
<div class="mensxp" id="fadeInBlock">
<img alt="menswarehouselogo" id="menslogo" src="images/mens.png">
<p id="jobs">Sales Associate</p>
<p id="dates">February 2014 - August 2014</p>
<ul class="mensul">
<li>Improved store displays by implementing my personal designs
and creativity.</li>
<li>Provided all customers with outstanding customer
service.</li>
<li>Product knowledge leader for all new merchandise and trends
in men’s fashion.</li>
<li>Highest sales per quarter.</li>
<li>Responsible for training of new hires to be effective sales
representatives.</li>
</ul>
</div>
</div>
<div class="education" id="fadeInBlock">
<h1 id="edu">Education</h1>
<div class="uvuedu">
<img alt="uvulogo" id="uvulogo" src="images/uvu.png">
<h3>Utah Valley University</h3>
<p>Associates of Science</p>
<p>Major: Business Management</p>
<p>Graduation - Fall 2017</p>
</div>
<div class="thinkfuledu" id="fadeInBlock">
<img alt="thinkfullogo" id="thinklogo" src="images/thinkful.png">
<h3>Thinkful</h3>
<p>Online Course</p>
<p>Front End Web Developer</p>
<p>Graduation - February 2015</p>
</div>
</div>
</body>
</html>

Javascript Fuzzy Search Breaking

I am using the following plugin by ListJS for a fuzzy search:
http://www.listjs.com/examples/fuzzy-search
I tried extending the plugin by adding my own method to filter by first letter, selecting from an A-Z list on click event.
The problem is as soon as you sort by letter, it breaks the search and wont filter anymore. I am storing the original list and adding it back in when you sort by letter because the ListJS plugin is removing list items and not hiding them by css. I am not sure if it's causing a problem or not? Any ideas?
JS Fiddle:
http://jsfiddle.net/xzzLuv3b/1/
HTML:
<div id="conditions-search-results">
<div class="col-md-12 conditions-search">
<h2 class="conditions-search-title">Find a Condition</h2>
<div class="conditions-search-form text-center">
<form class="form-inline form-flat-grey">
<div class="form-group">
<input type="text" class="form-control fuzzy-search" size="60" placeholder="Search by keyword or topic">
</div>
</form>
<div class="divider-wrapper">
<span class="divider-horizontal">OR</span>
</div>
<p>Choose by letter to browse conditions</p>
<ul class="list-unstyled conditions list-inline conditions-search-sort">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>M</li>
<li>N</li>
<li>O</li>
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
<li>T</li>
<li>U</li>
<li>V</li>
<li>W</li>
<li>X</li>
<li>Y</li>
<li>Z</li>
</ul>
</div>
<div class="col-md-12 conditions-wrapper">
<ul class="list-unstyled conditions-index list"><li class="condition">
<div class="condition-title">Arthritis</div>
<div class="condition-description"><p>Arthritis is another autoimmune disease that is long-term and causes inflammation of joints and the surrounding tissue. Severe cases have been known to affect other organs, as well.</p></div>
</li><li class="condition">
<div class="condition-title">Back Pain</div>
<div class="condition-description"><p>Back pain can rear its ugly head in several forms. Whether you suffer from this condition due to genetics, age or from a work-related injury, we have the ability to help you with your discomfort.</p></div>
</li><li class="condition">
<div class="condition-title">Carpal Tunnel</div>
<div class="condition-description"><p>Excessive pressure placed on the median nerve of the wrist. It may cause loss of feeling, immobility, numbness or tingling.</p></div>
</li><li class="condition">
<div class="condition-title">Chronic Fatigue Syndrome</div>
<div class="condition-description"><p>Chronic Fatigue is continuous and often severe tiredness that isn’t remedied by rest and is not caused by any other known medical conditions.</p></div>
</li><li class="condition">
<div class="condition-title">Degenerative Disc Disease</div>
<div class="condition-description"><p>Degenerative Disc Disease isn’t actually a disease. Rather, it’s a sanctioned medical term used to describe the normal changes that occurs in spinal discs as the body ages.*</p></div>
</li><li class="condition">
<div class="condition-title">Degenerative Joint Disease</div>
<div class="condition-description"><p>Degenerative Joint Disease is more commonly known as Osteoarthritis. It is due to the wear and tear of joints throughout the body as it ages.</p></div>
</li><li class="condition">
<div class="condition-title">Failed Surgery</div>
<div class="condition-description"><p>Failed Surgery, also known as Failed Back Surgery Syndrome (FBSS) is chronic pain in the back or legs after a spinal surgery.</p></div>
</li><li class="condition">
<div class="condition-title">Fibromyalgia</div>
<div class="condition-description"><p>Fibromyalgia is a very real disorder causing constant pain and general unease. Those suffering from this condition are frequently in a constant state of pain.</p></div>
</li><li class="condition">
<div class="condition-title">Gastroesophageal Reflux</div>
<div class="condition-description"><p>Gastroesophageal Reflux disease (GERD) occurs when the contents of the stomach leak backwards from the stomach into the esophagus.”</p></div>
</li><li class="condition">
<div class="condition-title">Headaches</div>
<div class="condition-description"><p>Painful, chronic headaches can make even the simplest of daily tasks unbearable. Here at Pittsburgh Chiropractic and West Hills Medical Center we provide several services to ascertain the origin of your headaches and help alleviate the pain.</p></div>
</ul>
</div>
</div>
</div>
Javascript:
/**
* Target conditions search list for fuzzy search
* #type {List} List JS object
*/
var conditionsList = new List('conditions-search-results', {
valueNames: ['condition-title'],
plugins: [ ListFuzzySearch() ]
});
/**
* Toggle list items when searching
*/
$('.fuzzy-search').on('keypress', function(e){
// Show conditions matched to the letter
$('li.condition').show();
});
/**
* Filter by Letter
* #param {letter} Selected letter from search box
*/
function filterByLetter(letter){
$('.condition').filter(function() {
return $(this).find('.condition-title').text().charAt(0).toUpperCase() === letter;
}).show();
};
/**
* Filter click event
* Sort by the letter that was clicked.
*/
$('.conditions-search-sort a').on('click',function(e){
e.preventDefault();
// Restore the original list
$('.conditions-index').replaceWith(conditionsIndex);
// Hide all list items
$('li.condition').hide();
// Selected Letter
var letter = $(this).text();
// Filter and show list items
filterByLetter(letter);
});
// Original conditions list index
var conditionsIndex = $(conditionsList.list).clone();

Using the List API filter the results of the fuzzy list instead of writing a custom filtering. This way ListFuzzySearch knows that the results have been filtered and thus the search will only work on the filtered results.
conditionsList.filter(); // resets the filter everytime
conditionsList.filter(function (item) {
return $(item.elm).find('.condition-title').text().charAt(0).toUpperCase() == letter;
});
The filter method finally looks like this
$('.conditions-search-sort a').on('click', function (e) {
e.preventDefault();
var letter = $(this).text();
conditionsList.filter();
conditionsList.filter(function (item) {
return $(item.elm).find('.condition-title').text().charAt(0).toUpperCase() == letter;
});
});
Here is a demo http://jsfiddle.net/dhirajbodicherla/xzzLuv3b/3/
Update
If the filters should reset on typing then the following should do it
$('.fuzzy-search').on('keypress', function (e) {
// Show conditions matched to the letter
conditionsList.filter();
$('li.condition').show();
});
$('.conditions-search-sort a').on('click', function (e) {
e.preventDefault();
var letter = $(this).text();
conditionsList.fuzzySearch.search(''); // this will make fuzzy ignore the text in the input.
conditionsList.filter(function (item) {
return $(item.elm).find('.condition-title').text().charAt(0).toUpperCase() == letter;
});
});
Here is an updated demo http://jsfiddle.net/dhirajbodicherla/xzzLuv3b/6/
However, you would need a way to remove the filter. Probably by adding a reset after A-Z links?

Simple Vertical Prev and Next buttons code on click moving up and down with jQuery

I had created a slider with this simple code
jQuery(".article_single_item .article_singlepage_title a:first").parent().parent().addClass("activeTab");
jQuery(".accomdation_tab:first").addClass("active_tab_content");
jQuery(".article_single_item .article_singlepage_title a").click(function(event) {
event.preventDefault();
$(this).parent().parent().addClass("activeTab");
$(this).parent().parent().siblings().removeClass("activeTab");
var tab = $(this).attr("href");
$(".accomdation_tab").not(tab).css("display", "none");
$(tab).fadeIn();
});
With This Code I can display following content for each item on click.Now I need to create a Prev and Next button functionality too, When clicking to next it must scroll or move the next item and etc. i am trying with this code
jQuery('#single_article_next').click(function(){
jQuery(".article_single_item .article_singlepage_title a").parent().parent().siblings().removeClass("activeTab");
jQuery(".article_single_item .article_singlepage_title a:first").parent().parent().next().addClass("activeTab");
jQuery(".accomdation_tab").siblings().removeClass("active_tab_content");
jQuery('.accomdation_tab:first').next().addClass("active_tab_content");
});
jQuery('#single_article_prev').click(function(){
jQuery(".article_single_item .article_singlepage_title a").parent().parent().siblings().removeClass("activeTab");
jQuery(".article_single_item .article_singlepage_title a:first").parent().parent().prev().addClass("activeTab");
jQuery(".accomdation_tab").siblings().removeClass("active_tab_content");
jQuery('.accomdation_tab:first').prev().addClass("active_tab_content");
});
But it is not what i need and didnt work properly.Help me to figure out.

To achieve next/prev functionality you have to take activeTab and to make active the next/previous one, like below.
Please notice that i replaced .article_single_item with .activeTab to take the active a.
var $activeTab = jQuery(".activeTab .article_singlepage_title a");
The code below is for next/prev functionality. I extracted a part of common functionality in function tabChange().
jQuery('#single_article_next').click(function(){
var $activeTab = jQuery(".activeTab .article_singlepage_title a");
$activeTab.parent().parent().next().siblings().removeClass("activeTab");
$activeTab.parent().parent().next().addClass("activeTab");
$activeTab = jQuery(".activeTab .article_singlepage_title a");
tabChange($activeTab)
});
jQuery('#single_article_prev').click(function(){
var $activeTab = jQuery(".activeTab .article_singlepage_title a");
$activeTab.parent().parent().prev().siblings().removeClass("activeTab");
$activeTab.parent().parent().prev().addClass("activeTab");
$activeTab = jQuery(".activeTab .article_singlepage_title a");
tabChange($activeTab)
});
function tabChange($activeTab) {
var tab = $activeTab.attr("href");
$(".accomdation_tab").not(tab).css("display", "none");
$(tab).fadeIn();
}
See the snippet for the working example.
jQuery(".article_single_item .article_singlepage_title a:first").parent().parent().addClass("activeTab");
jQuery(".accomdation_tab:first").addClass("active_tab_content");
jQuery(".article_single_item .article_singlepage_title a").click(function(event) {
event.preventDefault();
$(this).parent().parent().addClass("activeTab");
$(this).parent().parent().siblings().removeClass("activeTab");
tabChange($(this))
});
jQuery('#single_article_next').click(function() {
var $activeTab = jQuery(".activeTab .article_singlepage_title a");
$activeTab.parent().parent().next().siblings().removeClass("activeTab");
$activeTab.parent().parent().next().addClass("activeTab");
$activeTab = jQuery(".activeTab .article_singlepage_title a");
tabChange($activeTab)
});
jQuery('#single_article_prev').click(function() {
var $activeTab = jQuery(".activeTab .article_singlepage_title a");
$activeTab.parent().parent().prev().siblings().removeClass("activeTab");
$activeTab.parent().parent().prev().addClass("activeTab");
$activeTab = jQuery(".activeTab .article_singlepage_title a");
tabChange($activeTab)
});
function tabChange($activeTab) {
var tab = $activeTab.attr("href");
$(".accomdation_tab").not(tab).css("display", "none");
$(tab).fadeIn();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-7 column" style="float:none;margin:auto;">
<div class="solutions_single_title">
Solutions</div>
<div class="single_sol_content">
<p>We feel the best way to show you our solutions is to tell the stories of how our client successfully structured investment products using Exchange Traded Instruments (ETIs)</p>
</div>
<div class="col-md-4 single_solution_ipad_leftcol">
<div class="article_scroll_list">
<div class="other_art_title">Other Solutions</div>
<div class="article_scroll_content">
<div class="article_single_item activeTab">
<div class="article_singlepage_title">Private Equity
</div>
</div>
<div class="article_single_item">
<div class="article_singlepage_title">The New Manager
</div>
</div>
<div class="article_single_item">
<div class="article_singlepage_title">SME Financing
</div>
</div>
<div class="article_single_item">
<div class="article_singlepage_title">The UCITS Fund
</div>
</div>
</div>
<div class="article_list_border"></div>
<span id="single_article_prev">
<img src="http://argentarius.ipoint.com.mt/wp-content/themes/argentarius/images/article_arrow_down.png" alt="article" class="arrow_down">
<img src="http://argentarius.ipoint.com.mt/wp-content/themes/argentarius/images/article_arrow_down_hover.png" alt="article" class="arrow_down_hover">
</span>
<span id="single_article_next">
<img src="http://argentarius.ipoint.com.mt/wp-content/themes/argentarius/images/article_arrow_up.png" alt="article" class="arrow_up">
<img src="http://argentarius.ipoint.com.mt/wp-content/themes/argentarius/images/article_arrow_up_hover.png" alt="article" class="arrow_up_hover">
</span>
</div>
</div>
<div class="col-md-8 single_solution_ipad_rightcol">
<div id="solution_1" class="accomdation_tab active_tab_content" style="">
<div class="sigle_socenario_maintitle">
Private Equity
</div>
<div class="article_maincontent">
<p>A private equity manager based in a non EU jurisdiction consulted Argentarius to securitise a portfolio of investments in European SMEs with a listing on the Deutsche Börse and targeting professional investors in the EU.</p>
</div>
<div class="sigle_socenario_maintitle">
Own Issuer Vehicle</div>
<div class="article_maincontent">
<p>Argentarius created a branded Own Issuer Securitisation Cell Company for the manager to use as an EU base for investment opportunities.</p>
</div>
</div>
<div id="solution_2" class="accomdation_tab" style="display: none;">
<div class="sigle_socenario_maintitle">
The new manager
</div>
<div class="article_maincontent">
A new start up long/short equity manager consulted Argentarius to securitise a trading account at a multi-asset prime broker and with an ETI listed on the Deutsche Börse for the initial funding to be received from professional investors. Costs were a
prime concern here as the starting AUM was below 5 million euros. </div>
<div class="sigle_socenario_maintitle">
Fast and cost effective</div>
<div class="article_maincontent">
Our transparent cost structure meant that the new start up manager had control of their structuring costs from the start. Furthermore the ongoing management costs were clearly defined and the new manager could allocate the costs within the total management
fee for the strategy.</div>
</div>
<div id="solution_3" class="accomdation_tab" style="display: none;">
<div class="sigle_socenario_maintitle">
SME Financing
</div>
<div class="article_maincontent">
An asset manager securitised a portfolio of unlisted bonds arranged with European SMEs looking for new funding and listed it on the European Wholesale Securities Market as a target for professional investors and UCITS funds. The UCITS fund manager is
therefore able to gain exposure to high yielding SME bonds that are managed by the fund manager through a power of attorney granted by the Special Investment Vehicle that forms part of the securitisation structure.</div>
<div class="sigle_socenario_maintitle">
SME Financing ETI</div>
<div class="article_maincontent">
A key requirement with this ETI was the cost of running the portfolio needed to be kept to a minimum and this was achieved by structuring the management of the SME Bonds through a Special Investment Vehicle (SIV) created as a 100% subsidiary of the Securitisation
Cell Company. The selection of the bonds and the management of the repayments was directly handled by the UCITS fund manager under a power of attorney granted by the SIV.</div>
</div>
<div id="solution_4" class="accomdation_tab" style="display: none;">
<div class="sigle_socenario_maintitle">
The UCITS Fund seeking exposure to alternative investments
</div>
<div class="article_maincontent">
A large UCITS fund manager securitised both an FX trading account and a Commodity Futures trading account with two separate brokers to achieve diversification for the fund. The ETI was listed on the European Wholesale Securities Market. The UCITS fund
manager needed to be satisfied that the ETI met all the requirements of eligibility of assets, in addition to ensuring that no more than 10% of the AUM of the fund was invested within the ETI. The issuing Securitisation Cell Company had issued
several hundred million Euros in securities and thus the UCITS fund manager was able to confirm that not more than 10% of the issuance of the Securitisation Cell Company had been purchased.</div>
<div class="sigle_socenario_maintitle">
The UCITS ETI</div>
<div class="article_maincontent">
The European Wholesale Securities Market is a joint venture between the Irish and Malta Stock Exchanges and offers an excellent venue for the listing of eligible UCITS assets that are backed by alternative investment portfolios.</div>
</div>
</div>
</div>

Wrap your articles like this
<div class="article_scroll_content">
<ul id="article_title_list">
<li class="article_title">
<div class="article_single_item activeTab">
<div class="article_singlepage_title"> Private Equity
</div>
</div>
</li>
<li class="article_title">
<div class="article_single_item">
<div class="article_singlepage_title"> The New Manager
</div>
</div>
</li>
<li class="article_title">
<div class="article_single_item">
<div class="article_singlepage_title"> SME Financing
</div>
</div>
</li>
<li class="article_title">
<div class="article_single_item">
<div class="article_singlepage_title"> The UCITS Fund
</div>
</div>
</li>
</ul>
</div>
Then you can use some nicer code, like this
$(function () {
var $allTtitles = $('li.article_title');
var titleCount = $('li.article_title').length;
$('#title_count').html(titleCount);
var newActiveTitleIdx = 0;
var titleActiveIdx = 0;
function titleListUp() {
titleActiveIdx = $('li.article_title .active_title').index();
$allTitles.removeClass('active_title');
if (titleActiveIdx === 0) {
newActiveTitleIdx = titleCount - 1;
} else {
newActiveTitleIdx--;
}
$('#art_idx').html(newActiveTitleIdx);
$allTtitles.eq(newActiveTitleIdx).addClass('active_title');
}
function titleListDown() {
titleActiveIdx = $('li.article_title .active_title').index();
$allTitles.removeClass('active_title');
if (titleActiveIdx == (titleCount - 1) ) {
newActiveTitleIdx = 0;
} else {
newActiveTitleIdx++;
}
$('#art_idx').html(newActiveTitleIdx);
$allTtitles.eq(newActiveTitleIdx).addClass('active_title');
}
$('#single_article_prev').on('click', function () {
titleListUp();
});
$('#single_article_next').on('click', function () {
titleListDown();
});
});