I am trying to create a simple accordion menu - display: none display: block.
I'm having difficulty showing and hiding individual elements one by one at the moment when i click one accordion menu ALL accordion hidden menus are displaying. Does any know how i can solve this issue. I am aware I can use bootstrap how i want to custom build this...
Below is snippets of my code.
Angular
$scope.frqToggle = function () {
$scope.hiddenToggle = !$scope.hiddenToggle;
}
HTML
<div ng-click="frqToggle()" class="panel-heading">
<div class="future-box-date panel-heading-date">
<img src="/assets/FRQs/FRQ-Pointing-Right.png" alt="Arrow" />
</div>
<div class="panel-title">
<span>
Some text goes here
</span>
</div>
</div><!-- PANEL HEADING ENDS HERE -->
<div id="collapseOne" ng-class="{isHidden: hiddenToggle}" class="panel-collapse">
<p>
hidden menu goes here
</p>
</div>
</div><!-- PANEL ENDS HERE -->
</div>
<div class="frq-accordion">
<div class="panel panel-default">
<!-- PANEL STARTS HERE -->
<div ng-click="frqToggle()" class="panel-heading">
<div class="future-box-date panel-heading-date">
<img src="/assets/FRQs/FRQ-Pointing-Right.png" alt="Arrow" />
</div>
<div class="panel-title">
<span>
some text
</span>
</div>
</div><!-- PANEL HEADING ENDS HERE -->
<div id="collapseTwo" ng-class="{isHidden: hiddenToggle}" class="panel-collapse">
<p>
SOME TEXT
</p>
</div>
</div><!-- PANEL ENDS HERE -->
</div>
<div class="frq-accordion">
<div class="panel panel-default"> <!-- PANEL STARTS HERE -->
<div ng-click="frqToggle()" class="panel-heading">
<div class="future-box-date panel-heading-date">
<img src="/assets/FRQs/FRQ-Pointing-Right.png" alt="Arrow" />
</div>
<div class="panel-title">
<span>
<strong>Q: </strong>What are the key opportunities associated with spirit of place designs in travel-retail and duty-free environments?
</span>
</div>
</div><!-- PANEL HEADING ENDS HERE -->
<div id="collapseThree" ng-class="{isHidden: hiddenToggle}" class="panel-collapse">
<p>
<strong>A: </strong>We know that shoppers increasingly want it all. More brands, more stories, more service, more experiences, more convenience and more value. In this very near shopping future the experience of placelessness in airports could induce more yawns than wows.<br><br>
Spirit of place helps pivot passengers to shoppers. It can disrupt the traveller’s mindset by revealing the rich bounty of a local story. To be effective it must be a ‘living story’. Meaning it has continuity with the past, represents the present too and grows as the local story evolves.<br><br>
Airports with a sense of placelessness will miss an opportunity to seduce expectant passengers to become willing shoppers using a spirit of place.<br><br>
<small><strong>13/09/2016 | </strong><b>Lewis Allen</b>, Director of Environments, Portland Design</small>
</p>
</div>
</div><!-- PANEL ENDS HERE -->
</div>
You need a seperate variable for each element you want to show/hide:
$scope.hiddenToggleOne = false;
$scope.hiddenToggleTwo = false;
$scope.hiddenToggleThree = false;
//one fore each ...
$scope.frqToggle = function (toggleElem) {
toggleElem = !toggleElem;
};
You markup:
<div ng-click="frqToggle(hiddenToggleOne)" class="panel-heading">
<div class="future-box-date panel-heading-date">
<img src="/assets/FRQs/FRQ-Pointing-Right.png" alt="Arrow" />
</div>
<div class="panel-title">
<span>
Some text goes here
</span>
</div>
</div><!-- PANEL HEADING ENDS HERE -->
<div id="collapseOne" ng-class="{isHidden: hiddenToggleOne}" class="panel-collapse">
<p>
hidden menu goes here
</p>
</div>
</div><!-- PANEL ENDS HERE -->
</div>
<div class="frq-accordion">
<div class="panel panel-default">
<!-- PANEL STARTS HERE -->
<div ng-click="frqToggle(hiddenToggleTwo)" class="panel-heading">
<div class="future-box-date panel-heading-date">
<img src="/assets/FRQs/FRQ-Pointing-Right.png" alt="Arrow" />
</div>
<div class="panel-title">
<span>
some text
</span>
</div>
</div><!-- PANEL HEADING ENDS HERE -->
<div id="collapseTwo" ng-class="{isHidden: hiddenToggleTwo}" class="panel-collapse">
<p>
SOME TEXT
</p>
</div>
</div><!-- PANEL ENDS HERE -->
</div>
<div class="frq-accordion">
<div class="panel panel-default"> <!-- PANEL STARTS HERE -->
<div ng-click="frqToggle(hiddenToggleThree)" class="panel-heading">
<div class="future-box-date panel-heading-date">
<img src="/assets/FRQs/FRQ-Pointing-Right.png" alt="Arrow" />
</div>
<div class="panel-title">
<span>
<strong>Q: </strong>What are the key opportunities associated with spirit of place designs in travel-retail and duty-free environments?
</span>
</div>
</div><!-- PANEL HEADING ENDS HERE -->
<div id="collapseThree" ng-class="{isHidden: hiddenToggleThree}" class="panel-collapse">
<p>
<strong>A: </strong>We know that shoppers increasingly want it all. More brands, more stories, more service, more experiences, more convenience and more value. In this very near shopping future the experience of placelessness in airports could induce more yawns than wows.<br><br>
Spirit of place helps pivot passengers to shoppers. It can disrupt the traveller’s mindset by revealing the rich bounty of a local story. To be effective it must be a ‘living story’. Meaning it has continuity with the past, represents the present too and grows as the local story evolves.<br><br>
Airports with a sense of placelessness will miss an opportunity to seduce expectant passengers to become willing shoppers using a spirit of place.<br><br>
<small><strong>13/09/2016 | </strong><b>Lewis Allen</b>, Director of Environments, Portland Design</small>
</p>
</div>
</div><!-- PANEL ENDS HERE -->
</div>
Create an object to maintain which accordion is open. Lets say you have an accordion with 3 menu items that can open. Have an object like this which maintains which menu is open and which is closed.
$scope.accordion_visibility = {
menu_1: true,
menu_2: false,
menu_3: false
}
Now create a method to toggle the visibility of a menu.
$scope.toggleMenuVisibility = function(menu_name){
$scope.accordion_visibility[menu_name] = !$scope.accordion_visibility[menu_name];
}
Now in the view, use ng-show="accordion.menu_1", ng-show="accordion.menu_2" etc on each menu item. Also, add ng-click listener on each like ng-click="toggleMenuVisibility('menu_1')", ng-click="toggleMenuVisibility('menu_2')" etc on each menu. It should work.
button 1
<a (click)="iconClick(1)">
<p style="color:gray;">
nr 1 Create Documents from Scratch
</p>
</a>
button 2
<a (click)="iconClick(2)">
<p style="color:gray;">
nr 2 Create Documents from Scratch
</p>
</a>
on text 1
<div class="col-12" *ngIf="icon == 1"></div>
on text 2
<div class="col-12" *ngIf="icon == 2"></div>
on component
icon = null;
iconClick(number) {
this.icon = number;
}
Related
I have a collapsible panel working currently using the following HTML:
<div class="panel panel-entity panel-default>
<div class="panel-heading" onclick="{ $(event.target).siblings('.panel-body').slideToggle('slow'); }">
<span class="panel-heading-text">#Model.RoleName</span>
</div>
<div class="panel-body">
<div class="form-horizontal">
<div class="entity">
#*A bunch of form groups*#
</div>
</div>
</div>
</div>
However, this only allows the user to click on the panel header to collapse the panel, meaning that when they click on the text within the header, it will not collapse the panel.
Is there another approach I can take to allow the user to click anywhere within the header, including the text, to collapse the panel?
For any potential future readers, the way I solved this problem was by adding style="pointer-events: none;" to the span where the header text was stored.
If you are using a span element to add a class to the text within a collapsible panel header, this is the correct way to make the text click-through.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="panel panel-entity panel-default">
<div class="panel-heading" onclick="{ $(event.target).siblings('.panel-body').slideToggle('slow'); }">
<span class="panel-heading-text" style="pointer-events: none;">#Model.RoleName</span>
</div>
<div class="panel-body">
<div class="form-horizontal">
<div class="entity">
#*A bunch of form groups*#
</div>
</div>
</div>
</div>
You need to remove the <span class="panel-heading-text"> tag. Since that tag is there, when you click on the text, you are actually clicking on that element and not the .panel-heading element.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="panel panel-entity panel-default">
<div class="panel-heading" onclick="{ $(event.target).siblings('.panel-body').slideToggle('slow'); }">
#Model.RoleName
</div>
<div class="panel-body">
<div class="form-horizontal">
<div class="entity">
#*A bunch of form groups*#
</div>
</div>
</div>
</div>
i need to develop a slider / carousel like this exactly you can see the example in the site
i pasted the code and tried to study it but i got lost with scripts and the divs background not loaded!
simply i need to sliding three or more divs with custom pagination float on and every div is stretched to the browser page with background image cover like the example i mentioned before. Thank you
#media screen and (min-width:769px){.slider-menu{width:100%;font-size:0;position:absolute;right:0;bottom:42px;left:0;text-align:center;z-index:4}
.slider-menu>ul,.slider-menu>ul>li{display:inline-block}
.slider-menu>ul{padding:0;font-size:0;width:100%}
.slider-menu>ul>li{font:14px/14px "ApexNew-Medium",Helvetica,Arial,sans-serif;color:#000;background-color:#fff;text-transform:uppercase;letter-spacing:2px;padding-top:10px;padding-bottom:10px;border-right:1px solid #000;cursor:pointer;max-width:180px;width:100%;text-align:center}
.slider-menu>ul>li:first-child{position:relative}
.slider-menu>ul>li:first-child:before{content:"";width:90%;height:1px;position:absolute;bottom:5px;left:5%;background:#8f0c25}
.slider-menu>ul>li:last-child{border-right:0}
.slider-menu>ul>li.active{background-color:#8f0c25;color:#fff}
}
#media screen and (min-width:1366px){.slider-menu>ul>li{max-width:220px}
}
<div class="section row-slide"><div class="item--mobile wrap-item isActive inView" data-fx="slide" data-ancor-target="dynamism" >
<div class="slider-item__wrap" data-item-count="" >
<div class="slide current" >
<article class="model-item">
<div class="model-item__col pos-bottom-left js-responsive-image" data-src-medium="/content/dam/alfaromeo/global/model/giulietta/tablet/dynamism_modelapge-newgiulietta_medium.jpg" data-src-small="/content/dam/alfaromeo/global/model/giulietta/mobile/dynamism_modelpage-newgiulietta_small.jpg" data-src="/content/dam/alfaromeo/global/model/giulietta/desktop/dynamism_modelapge-newgiulietta.jpg" style=" background-image: url("/content/dam/alfaromeo/global/model/giulietta/desktop/dynamism_modelapge-newgiulietta.jpg");">
<div class="model-item__row">
<div class="color--light model__content left">
<h2 class="content__title">
DYNAMISM
</h2>
<div class="content__text">
<span class="animated-line"></span>
<p>CREATED TO MASTER THE ROAD</p>
</div>
<div class="content__descr">
<p>Each element of the New Alfa Giulietta has been designed to perfectly balance power and agility for every road condition, achieving extraordinary driving pleasure. </p>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="slide" >
<article class="model-item">
<div class="model-item__col pos-bottom-left js-responsive-image" data-src-medium="/content/dam/alfaromeo/global/model/giulietta/tablet/dna_modelpage-newgiulietta_medium.jpg" data-src-small="/content/dam/alfaromeo/global/model/giulietta/mobile/dna_modelpage-newgiulietta_small.jpg" data-src="/content/dam/alfaromeo/global/model/giulietta/desktop/dna_modelpage-newgiulietta.jpg" style="height: 544px; background-image: url("/content/dam/alfaromeo/global/model/giulietta/desktop/dna_modelpage-newgiulietta.jpg");">
<div class="model-item__row">
<div class="color--light model__content left">
<h2 class="content__title">
Alfa D.N.A.
</h2>
<div class="content__text">
<span class="animated-line"></span>
<p>DYNAMIC CONTROL</p>
</div>
<div class="content__descr">
<p>The Alfa D.N.A. system is the exclusive Alfa Romeo driving mode selector which adapts the vehicle’s performance to suit the driver’s style and road conditions. There are three modes: Dynamic, for performance, Natural for optimum fuel economy and All-Weather for tackling bad weather and low grip conditions.</p>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="slide">
<article class="model-item">
<div class="model-item__col pos-bottom-left js-responsive-image" style="background-image:url(images/models/giulietta/dynamism_modelapge-newgiulietta.jpg);">
<div class="model-item__row">
<div class=" model__content pos--right">
<h2 class="content__title">
SUSPENSION
</h2>
<div class="content__text">
<span class="animated-line"></span>
<p>FEEL THE ROAD</p>
</div>
<div class="content__descr">
<p>Sporty, fun, yet comfortable: the New Alfa Giulietta is equipped to deliver the authentic Alfa Romeo driving experience. The Macpherson front suspension and Multilink rear suspension have been designed to offer great road holding and a superior level of comfort. This combination offers a truly involving drive with no loss in refinement.</p>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
<!-- END contenitore elemento con scroll orizzontale -->
<!-- START Menu per scroll orrizzontale -->
<div class="slider-menu">
<ul class="slider-menu__items">
<li class="active" data-adobe="content::dynamism">
DYNAMISM
</li>
<li data-adobe="content::alfadna">
Alfa D.N.A.
</li>
<li data-adobe="content::suspension">
SUSPENSION
</li>
</ul>
</div>
<!-- END Menu per scroll orrizzontale -->
<!-- START pulsanti di avanzamento alla slide successiva nel data target deve esser contenuto il data-ancor-target della slide successiva -->
<div class="mobile-next-navigation" data-target="efficiency">EFFICIENCY</div>
<!-- END pulsanti di avanzamento alla slide successiva -->
</div>
</div>
please check this link : https://jsfiddle.net/IA7medd/osdLso66/
HTML :
<div id="demo">
<div class="container">
<div class="row">
<div class="span12">
<div id="owl-demo" class="owl-carousel">
<div class="item" style='background-image:url("https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg")'></div>
<div class="item" style='background-image:url("https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg")'></div>
<div class="item" style='background-image:url("https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg")'></div>
</div>
</div>
</div>
</div>
</div>
The style of each item in the slider which you can change its height :
.item{
height:350px;
background-position: center center;
background-size: cover;
}
This is the necessary plugins for the slider :
https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js
https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css
https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.css
and finally the slider script :
$(document).ready(function() {
$("#owl-demo").owlCarousel({
navigation : true,
slideSpeed : 300,
paginationSpeed : 400,
singleItem : true
});
});
I am trying to handle multiple click events of bootstrap accordion tab in one function, but unable to handle that. I want the functionality Like that:-
(1) If user click on any accordion tab then the icon should be change to minus(-).
(2) If user click on any accordion tab then all other opened tab should be closed.
I am able to do this using different function for every tab. but I have to handle this using only one function as I have Multiple tabs.
here is my html code:-
<div ng-controller="TabController">
<div class="panel panel-default">
<div class="panel-heading">
<a class="accordion-toggle" ng-click="clickOnTab($event,'FirstTab')" data-toggle="collapse" data-parent="#accordion" href="javascript:void(0),#collapseOne">
<div class="mid-col">
<h5>First Tab</h5>
</div>
<div class="right-col">
<div ng-class="{false:'glyphicon glyphicon-plus',true:'glyphicon glyphicon-minus'}[tabicon == 'FirstTab']"></div>
</div>
</a>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
This is content of First Tab<br/>
1. When The Tab is open the Icon Should be Minus (-). It is working Fine When you are playing with only one tab. But when you try to open another tab while this tab is currently open then Iam getting issue.
<br/> 2. When you open tab all other (Opened) tab should be closed.
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a class="accordion-toggle" ng-click="clickOnTab($event,'SecondTab')" data-toggle="collapse" data-parent="#accordion" href="javascript:void(0),#collapseTwo">
<div class="mid-col">
<h5>Second Tab</h5>
</div>
<div class="right-col">
<div ng-class="{false:'glyphicon glyphicon-plus',true:'glyphicon glyphicon-minus'}[tabicon == 'SecondTab']"></div>
</div>
</a>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
This is content of Second Tab<br/>
1. When The Tab is open the Icon Should be Minus (-). It is working Fine When you are playing with only one tab. But when you try to open another tab while this tab is currently open then Iam getting issue.
<br/> 2. When you open tab all other (Opened) tab should be closed.
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a class="accordion-toggle" ng-click="clickOnTab($event,'ThirdTab')" data-toggle="collapse" data-parent="#accordion" href="javascript:void(0),#collapseThree">
<div class="mid-col">
<h5>First Tab</h5>
</div>
<div class="right-col">
<div ng-class="{false:'glyphicon glyphicon-plus',true:'glyphicon glyphicon-minus'}[tabicon == 'ThirdTab']"></div>
</div>
</a>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
This is content of Third Tab<br/>
1. When The Tab is open the Icon Should be Minus (-). It is working Fine When you are playing with only one tab. But when you try to open another tab while this tab is currently open then Iam getting issue.
<br/> 2. When you open tab all other (Opened) tab should be closed.
</div>
</div>
</div>
</div>
Here is the Controller:-
var myapp = angular.module('plunker', []);
myapp.controller("TabController",function($scope){
$scope.clickOnTab = function($event,val){
console.log($event);
//console.log($event.currentTarget);
$scope.tabrighticon = !$scope.tabrighticon;
console.log($scope.tabrighticon);
if($scope.tabrighticon)
$scope.tabicon = val;
else
$scope.tabicon = 1;
};
});
Here is the plnkr
Good day good people, I very much appreciate the depths of knowledge on this site.
Long story:
I have made a couple of very basic websites with html and css but this is my first attempt at a more interactive website with Javascript. The URL is www.audiophilesengineering.com and it has a few glitches that I cannot pinpoint in my code. Specifically, the entire "Contact" page loads the content twice. This seems like the most consistent error so I would like to tackle that first. I am currently a young broke entrepreneur, so I am forced to do most everything myself for my businesses, for now. At the same time I am dissatisfied with my previous boring website and want to make something much more interactive, but some serious glitches have developed.
tldr (short story);
Why does the content of http://audiophilesengineering.com/#!Contact.html display twice?
contact page html code:
<div class="genericSection section-CONTACT">
<!--add here url for this section background image-->
<img class="sectionBackgroundImage" src="pages/backgrounds/background_contact.jpg" />
<!--/section background image-->
<!--add here page number-->
<p class="pageNum textColor01">04/<span class="textColor03">07</span></p>
<!--/add here page number-->
<!--skeleton container-->
<div class="container">
<!--Website logo-->
<div class="row">
<div class="sixteen columns">
<img class="brand" src="images/logo.png" alt="logo" />
</div>
</div>
<!--/Website logo-->
<!--Section title H2-->
<div class="row">
<div class="sixteen columns">
<div class="h2square backgroundColor02">1</div>
<h2 class="textColor01">Contact Us<span class="textColor02"> // Phone or Email</span></h2>
<div class="horizontalLine backgroundColor02"></div>
<div class="clear-fx"></div>
<div class="addressContainer">
<p><a class="phoneBig textColor01" href="tel:+8134801321">813-480-1321</a></p>
<p>audiophilesengineering#gmail.com</p>
<p class="defaultText textColor01">Audiophiles Engineering<br />Tampa, Florida 33624<br />United States</p>
</div>
</div>
</div>
<!--/Section title H2-->
<!--vertical spacer-->
<div class="verticalSpacerMedium"></div>
<!--/vertical spacer-->
<!--Section title H2-->
<div class="row">
<div class="sixteen columns">
<div class="h2square backgroundColor02">2</div>
<h2 class="textColor01">Visit Us<span class="textColor02"> // By Appointment Only</span></h2>
<div class="horizontalLine backgroundColor02"></div>
<div class="clear-fx"></div>
<!--full width map-->
<div class="mapContainer">
<iframe width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?q=28.04,-82.51&sll=28.040078,-82.510190&hl=en&ie=UTF8&t=p&ll=28.033198,-82.507324&spn=1.939406,8.789063&z=6&output=embed"></iframe>
</div>
</div>
</div>
<!--/Section title H2-->
</div>
<!--/skeleton container-->
</div>
I am using bootstrap 3 for my columns and I am trying to have two columns together, the one on the left to have a big text h4 title and the one on the right a small text comments count.
The problem is when adding the h4 tags around the title the "1 comments" bit seems to jump up to the top of the div it is in, I want it aligned to the bottom. Ideally I would want it aligned the same as the h4 and to the right.
Image to show:
see the comments bit is higher than the bigger title text :(
<!-- main content -->
<div class="row">
<!-- Articles -->
<div class="col-md-9">
<!-- notification -->
<div class="alert alert-warning text-center">
You have <span class="badge badge-important">3</span> admin items needing review!
</div>
<!-- new sales -->
<div class="alert alert-success text-center">
<strong>Latest Games On Sale:</strong> <span class="label label-info">Steam</span> Sparkle 2 Evo, <span class="label label-info">Steam</span> Shadow Warrior Classic Redux, <span class="label label-info">Steam</span> Redshirt, <span class="label label-info">Steam</span> Gravity Badgers - See all
</div>
<div id="maincontent">
<!-- Article -->
<div class="row">
<div class="col-md-8"><h4>Sdasd Asdasdasdasdasdasdasdasd</h4></div>
<div class="col-md-4"><p class="small muted"><span class="glyphicon glyphicon-comment"></span> 1 Comments</p></div>
</div>
This is because, in Bootstrap an <h4> has a top margin of 10px and a <p> has a top margin of 0. Not that I am condoning inline styles, but this should give you an idea of how to get around it:
<div class="row">
<div class="col-md-8">
<h4>Sdasd Asdasdasdasdasdasdasdasd</h4>
</div>
<div class="col-md-4">
<p class="small muted" style="margin-top:14px;"><span class="glyphicon glyphicon-comment"></span> 1 Comments</p>
</div>
</div>
I used 14px instead of 10px to compensate for the difference in font-size. I also