I can't seem to figure out how to merge the two Video bullet points into one bullet point that contains the two drivers.
Collection Data
"drivers":[
{"title":"Nvidia Video Driver","category":"Video","version":"331.82","description":"Lorem ipsum dolor sit amet","filename":"nvidia.exe"},
{"title":"Intel Video Driver","category":"Video","version":"10.4.4740","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies.","filename":"intel.exe"},
{"title":"Realtek Audio","category":"Audio","version":"1.25.21","description":"consectetur adipiscing elit. Suspendisse ultricies.","filename":"audio.exe"},
{"title":"Storage controller","category":"chipset","version":"23.13.412","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit.","filename":"chip.exe"}
]
deviceDetails.helpers
Template.deviceDetails.helpers({
deviceDrivers:function(drivers) {
var driverArray = drivers.sort(function(a, b) {
if (a.category.toLowerCase() < b.category.toLowerCase()) return -1;
if (a.category.toLowerCase() > b.category.toLowerCase()) return 1;
return 0;
});
console.log(driverArray);
return driverArray;
}
});
DeviceDetails.html
<ul>
{{#each deviceDrivers device.drivers}}
<li class="text-capitalize list-unstyled">{{category}}<ul>
<li>{{title}} -> {{version}}<br>
{{description}}
</li></ul>
</li>
{{/each}}
</ul>
Result
- Audio
- Realtek Audio -> 1.25.21
- Consectetur Adipiscing Elit. Suspendisse Ultricies.
- Chipset
- Storage Controller -> 23.13.412
- Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit.
- Video
- Nvidia Video Driver -> 331.82
- Lorem Ipsum Dolor Sit Amet
- Video (!REMOVE! line)
- Intel Video Driver -> 10.4.4740
- Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit. Suspendisse Ultricies.
Desired Result
- Audio
- Realtek Audio -> 1.25.21
- Consectetur Adipiscing Elit. Suspendisse Ultricies.
- Chipset
- Storage Controller -> 23.13.412
- Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit.
- Video
- Nvidia Video Driver -> 331.82
- Lorem Ipsum Dolor Sit Amet
- Intel Video Driver -> 10.4.4740
- Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit. Suspendisse Ultricies.
Update
I was able to get the desired result using Julien Answer.
deviceDrivers:function(drivers) {
var driverArray = drivers.reduce(function(result, driver){
var category = result.find(function(search){
return search.category === driver.category;
});
if(category){
category.drivers.push(driver);
} else {
result.push({
category:driver.category,
drivers: [driver]
});
}
return result
},[]).sort(function(a, b) {
if (a.category.toLowerCase() < b.category.toLowerCase()) return -1;
if (a.category.toLowerCase() > b.category.toLowerCase()) return 1;
return 0;
});
console.log(driverArray);
return driverArray;
}
Update 2
Christian Fritz Answer worked perfectly after his edit.
deviceDrivers:function(drivers) {
var test = _.map(
_.sortBy(
_.groupBy(drivers, 'category'), function(value, key) {
return key.toLowerCase();
}), function(value, key) {
return {category:value[0].category,drivers: value};
});
console.log(test);
return test;
}
You can use Array.prototype.reduce :
drivers.reduce(function(result, driver){
var category = result.find(function(search){
return search.category === driver.category;
});
if(category){
category.drivers.push(driver);
} else {
result.push({
category:driver.category,
drivers: [driver]
});
}
return result
},[]);
I've learned that from this tutorial series, the guy is brilliant and very funny.
This will give you an array looking like:
[
{
"category": "Video",
"drivers": [
{
"title": "Nvidia Video Driver",
// ...
},
{
"title": "Intel Video Driver",
// ... }
]
},
{
"category": "Audio",
"drivers": [
{
"title": "Realtek Audio",
// ... }
]
},
{
"category": "chipset",
"drivers": [
{
"title": "Storage controller",
// ...
}
]
}
]
And then in your template, you should try something like:
<ul>
{{#each deviceDrivers}}
<li class="text-capitalize list-unstyled">{{category}}
{{#each deviceDrivers}}
<ul>
<li>{{title}} -> {{version}}<br>
{{description}}
</li>
</ul>
{{/each}}
</li>
{{/each}}
</ul>
I would suggest pre-grouping:
JS:
Template.deviceDetails.helpers({
deviceDrivers:function(drivers) {
var driverGroups =
_.map(
_.sortBy(
_.groupBy(drivers, 'category'), function(value, key) {
return key.toLower();
}), function(value, key) {
return {key: key, value: value};
});
console.log(driverGroups);
return driverGroups;
}
});
HTML:
<ul>
{{#each deviceDrivers device.drivers}}
<li class="text-capitalize list-unstyled">{{key}}<ul>
{{#with value}}
<li>{{title}} -> {{version}}<br>
{{description}}
</li></ul>
{{/with}}
</li>
{{/each}}
</ul>
Related
I'm having a problem with the array showing the title and description. When I try [0,0] it won't show the title or the description. When I try
var imgCount = 0;
var imgContent = [
["imgOption1", "BOM", "Lorem ipsum dolor sit amet."],
["imgOption2", "DOM", "Nullam fringilla imperdiet eleifend"],
["imgOption3", "JavaScript", "Cras dapibus ipsum a consequat tincidunt"]
];
function previewImg(imgSrc){
document.getElementById("imgViewer").src = imgSrc.src;
alert(imgContent[imgCount][0]= imgSrc.id);
}
Expected Output:
imgOption1 BOM Lorem ipsum dolor sit amet.
Not the output I wanted
imgOption1
The problem is I want to show both title and description that I showed on expected output.
var imgContent = [
["imgOption1", "BOM", "Lorem ipsum dolor sit amet."],
["imgOption2", "DOM", "Nullam fringilla imperdiet eleifend"],
["imgOption3", "JavaScript", "Cras dapibus ipsum a consequat tincidunt"]
];
const output = imgContent[0].join(' ');
console.log(output);
You can use objects instead of nested arrays in that case:
const imgContent = [{ title: 'imgOption1', description: 'Lorem ipsum dolor sit amet.' }];
Then you can simply access the title/description using
imgContent[0].title // imgOption1
imgContent[0].description // Lorem ipsum dolor sit amet.
I am trying to reinitialize owl carousel after a successful ajax call. The ajax call will change the data but the view should stay the same.I am having an issue where the view carousel structure will not reinitialize. I don't know where I did mistake.
Ajax Request
$(document).on('click', '.category_list', function() {
var category_id = $(this).attr('data-id');
var _token = $('#_token').val();
var param = 'category_id=' + category_id + '&_token=' + _token;
$.ajax({
type: "POST",
datatype: "json",
url: "/master/sub_category",
data: param,
success: function(result) {
$('#test').html(result);
var owl = $(".owl-carousel");
owl.owlCarousel({
items: 4,
navigation: true
});
}
});
});
Controller Function
public function getImg() {
$post_data = Request::all();
$sub_img = $this->imgModel->getImgList($post_data);
$sub_img_html = '';
foreach ($sub_img ['data'] as $data_img ) {
$img = '/img/sub_category/'.$data_img ['img'];
$sub_img_html .= '<div class="item">';
$sub_img_html .= '<img src="'.$img.'" />';
$sub_img_html .= '</div>';
}
echo $sub_img_html;
}
View
<div id="demo">
<div id="test" class="owl-carousel">
<?php
if (!empty($img_category)) {
foreach ($img_category as $imgcategory){
?>
<div class="item">
<img src='/img/sub_category/<?= imgcategory['subcategory_img'] ?>'/></div>
<?php
}
}
?>
</div>
</div>
As per your code I make changes please apply this I hope this code work full.
success: function(result) {
$('#demo').html('<div id="testing" class="owl-carousel"></div>');
for(var i=0;i<result.length;i++){
$(".owl-carousel").append('<div class="item"><img src="/img/sub_category/'+result[i].subcategory_img+'" /></div>');
};
var owl = $("#testing");
owl.owlCarousel({
items: 4,
navigation: true
});
I believe you will need to destroy and re-initalize the carousel. There is a destroy method you can call;
https://github.com/OwlCarousel2/OwlCarousel2/blob/develop/src/js/owl.carousel.js#L1391
or there is a refresh method;
https://github.com/OwlCarousel2/OwlCarousel2/blob/develop/src/js/owl.carousel.js#L608
or there is an update method;
https://github.com/OwlCarousel2/OwlCarousel2/blob/develop/src/js/owl.carousel.js#L569
I believe these can all be called;
$('.owl-gallery').owlCarousel('refresh');
Might be worth a try.
This was my approach and it works with the version 2.2.1 :
$.getJSON('testimonials.json', function(data) {
var content = "";
for(var i in data["items"]){
var text = data["items"][i].text;
var name = data["items"][i].name;
var position = data["items"][i].position;
content += text + name + position
}
// set the content inside the element
$("#test_slider").html(content);
// Now we can call the owlCarousel
$('#test_slider').owlCarousel({
dots: false,
nav: true,
loop: true,
margin:30,
smartSpeed: 700,
items:1,
autoplay:true,
});
});
As for testimonials.json looks like this :
{
"items" :
[
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem Ipsum has been the Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing.",
"name": "Maurice Pittmansss",
"position": "CEO of ABS Ltd.1"
},
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem Ipsum has been the Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing.",
"name": "Maurice Pittmanggg",
"position": "CEO of ABS Ltd.2"
},
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem Ipsum has been the Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing.",
"name": "Maurice Pittmannnn",
"position": "CEO of ABS Ltd3."
}
]
}
Nothing above worked for me only this worked :
$('.owl-gallery').data('owlCarousel').destroy();
$('.owl-gallery').owlCarousel(options);
How to generate nested ordered lists from the following content? I have searched the forum and worked for a few hours now to generate ordered lists based on the different classes from the source content. The content may have up to 6 nesting
level.
What I need is to generate ordered lists based on the different classes. As shown in the sample content to get something like below outlined example content.
.firstclass => 1.
.secondclass => 1.
.thirdclass => 1.
.fourthclass => 1.
The code:
var cheerio = require('cheerio');
var $ = cheerio.load('<h1 class="header">First Header</h1><p class="firstclass">First Lorem ipsum dolor sit.</p><p class="firstclass">First Qui consequatur labore at.</p><p class="secondclass">Second Lorem ipsum dolor sit amet.</p> <p class="thirdclass">Third Lorem ipsum dolor sit amet.</p><p class="thirdclass">Third Molestias optio quasi ipsam unde!</p><p class="secondclass">Second Lorem ipsum dolor sit amet, consectetur.</p><p class="fourthclass">Fourth Lorem ipsum dolor sit.</p><p class="firstclass">First Lorem ipsum dolor sit amet.</p>', {
normalizeWhitespace: true,
xmlMode: true,
decodeEntities: false,
});
var myContent = $('p').each(function() {
var para = $(this).text();
return para;
});
var olClass = ['.firstclass', '.secondclass', '.thirdclass', '.fourthclass'];
function arrToOl(arr) {
var ol = $('<ol />'),
li = $('<li />');
for (var i = 0; i < arr.length; i++) {
if (Array.isArray(arr[i])) {
li.append(arrToOl(arr[i]));
} else {
li = $('<li />');
li.append($(arr[i]));
ol.append(li);
}
}
return $.html(ol);
}
console.dir(arrToOl(olClass));
The above code produces the following:
'<ol><li><p class="firstclass">First Lorem ipsum dolor sit.</p><p class="firstclass">First Qui consequatur labore at.</p><p class="firstclass">First Lorem ipsum dolor sit amet.</p></li><li><p class="secondclass">Second Lorem ipsum dolor sit amet.</p><p class="secondclass">Second Lorem ipsum dolor sit amet, consectetur.</p></li><li><p class="thirdclass">Third Lorem ipsum dolor sit amet.</p><p class="thirdclass">Third Molestias optio quasi ipsam unde!</p></li><li><p class="fourthclass">Fourth Lorem ipsum dolor sit.</p></li></ol>'
The desired result should be:
<ol>
<li>
<p class="firstclass">First Lorem ipsum dolor sit.</p>
</li>
<li>
<p class="firstclass">First Qui consequatur labore at.</p>
</li>
<li>
<p class="firstclass">First Lorem ipsum dolor sit amet.</p>
<ol>
<li>
<p class="secondclass">Second Lorem ipsum dolor sit amet.</p>
</li>
<li>
<p class="secondclass">Second Lorem ipsum dolor sit amet, consectetur.</p>
<ol>
<li>
<p class="thirdclass">Third Lorem ipsum dolor sit amet.</p>
</li>
<li>
<p class="thirdclass">Third Molestias optio quasi ipsam unde!</p>
<ol>
<li>
<p class="fourthclass">Fourth Lorem ipsum dolor sit.</p>
</li>
</ol>
</li>
</ol>
</li>
</ol>
</li>
</ol>
Your help is really appreciated.
Here's what I got.
let array = ["a", "b", "c", "d"];
var nested;
function create_nested()
{
var old_ol;
for (let i = 0; i < array.length; i++)
{
let new_ol = document.createElement("ol");
let new_li = document.createElement("li");
new_li.innerHTML = array[i];
new_ol.appendChild(new_li);
if (i !== 0)
{
let nest_li = document.createElement("li");
let new_p = document.createElement("p");
new_p.innerHTML = "new stuff";
nest_li.appendChild(new_p);
nest_li.appendChild(old_ol);
new_ol.appendChild(nest_li);
}
old_ol = new_ol;
nested = new_ol;
}
}
create_nested();
document.getElementById('main').appendChild( nested);
<div id='main'>
</div>
This is just an example and not exactly the data that you have (you can figure that out).
What's happening is that I'm creating new elements using document.createElement, after which I am inserting them into their corresponding ol/li using appendChild.
The most important part is the if (i !== 0) (Change this to suit whether you want to start from the beginning or end of your array). This is the part where I am creating the nests.
I am creating a new li, which has the <p> and the old_ol which is the nesting li. So what this function is doing, is creating the innermost ol, and expanding it upward.
There might be a clear/better way of doing this, but this is as far as I know in vanilla JS. I hope everything is clear enough.
I am trying to reinitialize owl carousel after a successful ajax call. The ajax call will change the data but the view should stay the same.I am having an issue where the view carousel structure will not reinitialize. I don't know where I did mistake.
Ajax Request
$(document).on('click', '.category_list', function() {
var category_id = $(this).attr('data-id');
var _token = $('#_token').val();
var param = 'category_id=' + category_id + '&_token=' + _token;
$.ajax({
type: "POST",
datatype: "json",
url: "/master/sub_category",
data: param,
success: function(result) {
$('#test').html(result);
var owl = $(".owl-carousel");
owl.owlCarousel({
items: 4,
navigation: true
});
}
});
});
Controller Function
public function getImg() {
$post_data = Request::all();
$sub_img = $this->imgModel->getImgList($post_data);
$sub_img_html = '';
foreach ($sub_img ['data'] as $data_img ) {
$img = '/img/sub_category/'.$data_img ['img'];
$sub_img_html .= '<div class="item">';
$sub_img_html .= '<img src="'.$img.'" />';
$sub_img_html .= '</div>';
}
echo $sub_img_html;
}
View
<div id="demo">
<div id="test" class="owl-carousel">
<?php
if (!empty($img_category)) {
foreach ($img_category as $imgcategory){
?>
<div class="item">
<img src='/img/sub_category/<?= imgcategory['subcategory_img'] ?>'/></div>
<?php
}
}
?>
</div>
</div>
As per your code I make changes please apply this I hope this code work full.
success: function(result) {
$('#demo').html('<div id="testing" class="owl-carousel"></div>');
for(var i=0;i<result.length;i++){
$(".owl-carousel").append('<div class="item"><img src="/img/sub_category/'+result[i].subcategory_img+'" /></div>');
};
var owl = $("#testing");
owl.owlCarousel({
items: 4,
navigation: true
});
I believe you will need to destroy and re-initalize the carousel. There is a destroy method you can call;
https://github.com/OwlCarousel2/OwlCarousel2/blob/develop/src/js/owl.carousel.js#L1391
or there is a refresh method;
https://github.com/OwlCarousel2/OwlCarousel2/blob/develop/src/js/owl.carousel.js#L608
or there is an update method;
https://github.com/OwlCarousel2/OwlCarousel2/blob/develop/src/js/owl.carousel.js#L569
I believe these can all be called;
$('.owl-gallery').owlCarousel('refresh');
Might be worth a try.
This was my approach and it works with the version 2.2.1 :
$.getJSON('testimonials.json', function(data) {
var content = "";
for(var i in data["items"]){
var text = data["items"][i].text;
var name = data["items"][i].name;
var position = data["items"][i].position;
content += text + name + position
}
// set the content inside the element
$("#test_slider").html(content);
// Now we can call the owlCarousel
$('#test_slider').owlCarousel({
dots: false,
nav: true,
loop: true,
margin:30,
smartSpeed: 700,
items:1,
autoplay:true,
});
});
As for testimonials.json looks like this :
{
"items" :
[
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem Ipsum has been the Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing.",
"name": "Maurice Pittmansss",
"position": "CEO of ABS Ltd.1"
},
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem Ipsum has been the Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing.",
"name": "Maurice Pittmanggg",
"position": "CEO of ABS Ltd.2"
},
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem Ipsum has been the Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing.",
"name": "Maurice Pittmannnn",
"position": "CEO of ABS Ltd3."
}
]
}
Nothing above worked for me only this worked :
$('.owl-gallery').data('owlCarousel').destroy();
$('.owl-gallery').owlCarousel(options);
I want to remove Phase Content (1st header - See fiddle) and want only these in my code:
Expand - all steps
Steps 1
Steps 2
Steps 3
The above should appear without Phase Content in the code. But i dont know how to change the javascript so as to remove the Phase Content and work only with Steps Content
JSFIDDLE
or below is the code:
jQuery(".phaseContent").hide();
jQuery(".stepsContent").hide();
//toggle the componenet with phase level
jQuery(".phaseHeading .heading1").click(function () {
$(this).toggleClass("active");
var th = jQuery(this).parent();
jQuery(th).next(".phaseContent").slideToggle(500);
return false;
});
jQuery(".stepsHeading .heading1").click(function () {
$(this).toggleClass("active");
var th = jQuery(this).parent();
jQuery(th).next(".stepsContent").slideToggle(500);
return false;
});
//Expand and collapse toggle
$(".accordion-expand-all").click(function () {
var expandLink = $(this);
var contentAreas = $(expandLink).closest(".phaseContent").find(".stepsContent");
// Toggle the content area visibility
$(contentAreas).toggle();
// If the content area is now visible
if ($(contentAreas).is(':visible')) {
// Change it to the collapse text
$(expandLink).text('Collapse - all steps');
} else {
// Change it to the expand text
$(expandLink).text('Expand - all steps');
}
$(expandLink).closest(".phaseContent").find(".stepsHeading .heading1").toggleClass("active");
return false;
});
HTML
<!-- Start Phase -->
<!-- Start phase heading -->
<div class="phaseHeading"><span class="heading1">Phase 1</span>
</div>
<!-- Start phase content -->
<div class="phaseContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet, nunc eget laoreet sagittis, quam.
<!--Expand steps button-->
<p class="accordion-expand-holder">
<a class="accordion-expand-all" id="st1" href="#">Expand View - all steps</a>
</p>
<!-- Start steps heading -->
<div class="stepsHeading"><span class="heading1">Steps 1</span>
</div>
<div class="stepsContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet.
</div>
<!-- Start step 2 -->
<div class="stepsHeading"><span class="heading1">Steps 2</span>
</div>
<div class="stepsContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet, nunc eget laoreet sagittis.
</div>
<!-- Start step 2 -->
<div class="stepsHeading"><span class="heading1">Steps 3</span>
</div>
<div class="stepsContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet, nunc eget laoreet sagittis.
</div>
</div>
I update your Fiddle. Please check this jsFiddle
I remove phaseHeading from your HTML and put one Div above accordion-expand-holder name <div class="stepsParent">
<div class="stepsParent">
<p class="accordion-expand-holder"> <a class="accordion-expand-all" id="st1" href="#">Expand View - all steps</a>
</p>
<!-- Start steps heading -->
<div class="stepsHeading"><span class="heading1">Steps 1</span>
</div>
<div class="stepsContent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet.</div>
<!-- Start step 2 -->
<div class="stepsHeading"><span class="heading1">Steps 2</span>
</div>
<div class="stepsContent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet, nunc eget laoreet sagittis.</div>
<!-- Start step 2 -->
<div class="stepsHeading"><span class="heading1">Steps 3</span>
</div>
<div class="stepsContent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet, nunc eget laoreet sagittis.</div>
</div>
Also change JS like Below
$(document).ready(function () {
$(".accordion-expand-all").parent().parent().find(".stepsContent").hide("slide");
jQuery(".stepsHeading .heading1").click(function () {
$(this).toggleClass("active");
var th = jQuery(this).parent();
jQuery(th).next(".stepsContent").slideToggle(500);
return false;
});
var collapsed = 1;
$(".accordion-expand-all").click(function () {
var expandLink = $(this);
var contentAreas = $(expandLink).parent().parent().find(".stepsContent");
if (collapsed == 0){
$(contentAreas).hide("slide");
collapsed =1;
$(expandLink).text('Expand - all steps');
} else {
$(contentAreas).show("slide");
collapsed = 0;
$(expandLink).text('Collapse - all steps');
}
$(expandLink).closest(".stepsHeading .heading1").toggleClass("active");
return false;
});
});
i have updated your jsFiddle, hope you get your solution.
changed javascript part
jQuery(".phaseHeading .heading1").click(function () {
$(this).toggleClass("active");
var th = jQuery(this).parent();
jQuery(th).next(".phaseContent").slideToggle(500);
jQuery(".phaseContent1").hide();
jQuery(".phaseHeading").hide();
return false;
});
changed html part
<div class="phaseContent1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet, nunc eget laoreet sagittis, quam.
</div>
or you can also remove this changed div from html and jQuery(".phaseContent1").hide(); from changed js
You can use this
$(".phaseHeading .heading1").click(function () {
$(this).toggleClass("active");
var th = jQuery(this).parent();
$(th).next(".phaseContent").slideToggle(500);
$(".phaseContent1").hide();
$(".phaseHeading").hide();
return false;
});
Also do some changes in Div Class
<div class="Content1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet.
</div>