The idea is that the user can either download the file by clicking download or view it as a png in browser by clicking open/show/whatever.
I used a solution found on here to achieve a show/hide toggle div function. It worked perfectly for one list item, but I'm trying to find a way to use this with a list of about 30 entries. I know I could just copy and paste the code and make new classes for the divs and anchors but surely there's a better way. I'm new to web development so I apologise if the solution is an obvious one.
Here is an example. I want each entry to control it's own div toggle (click on open).
$('.list-link').click(function() {
$('.test-div').show(500);
$('.list-link').hide(0);
$('.Hide').show(0);
});
$('.Hide').click(function() {
$('.test-div').hide(500);
$('.list-link').show(0);
$('.Hide').hide(0);
});
.list-entry {
background-color: darkgrey;
width: 200px;
margin-bottom: 10px;
list-style: none;
}
.test-div {
width: 200px;
height: 100px;
background-color: blue;
display: none;
}
.Hide {
display: none;
}
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<ul class="list">
<li class="list-entry">
<p> test 1</p>
<div class="links">
<a class="download-link" href="">download</a>
<a class="list-link">open</a>
<a class="Hide">hide</a>
</li>
<div class="test-div"></div>
<li class="list-entry">
<p> test 2</p>
<div class="links">
<a class="download-link" href="">download</a>
<a class="list-link">open</a>
<a class="Hide">hide</a>
</div>
</li>
<div class="test-div"></div>
<li class="list-entry">
<p> test 3</p>
<div class="links">
<a class="download-link" href="">download</a>
<a class="list-link">open</a>
<a class="Hide">hide</a>
</div>
</li>
<div class="test-div"></div>
</ul>
https://codepen.io/pen/RwgaxRQ
Thanks in advance.
To do what you require you can use jQuery's DOM traversal methods, such as closest() and find(), to relate the element that raised the click event to those around it which you want to affect.
Also note that your HTML is invalid. ul can only contain li elements, not div, so you need to change the structure slightly.
With that said, try this:
$('.list-link').click(function() {
let $li = $(this).closest('li');
$li.find('.test-div').show(500);
$li.find('.list-link').hide();
$li.find('.Hide').show();
});
$('.Hide').click(function() {
let $li = $(this).closest('li');
$li.find('.test-div').hide(500);
$li.find('.list-link').show();
$li.find('.Hide').hide();
});
.list-entry {
background-color: darkgrey;
width: 200px;
margin-bottom: 10px;
list-style: none;
}
.test-div {
width: 200px;
height: 100px;
background-color: blue;
display: none;
}
.Hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<ul class="list">
<li class="list-entry">
<p> test 1</p>
<div class="links">
<a class="download-link" href="">download</a>
<a class="list-link">open</a>
<a class="Hide">hide</a>
</div>
<div class="test-div"></div>
</li>
<li class="list-entry">
<p> test 2</p>
<div class="links">
<a class="download-link" href="">download</a>
<a class="list-link">open</a>
<a class="Hide">hide</a>
</div>
<div class="test-div"></div>
</li>
<li class="list-entry">
<p> test 3</p>
<div class="links">
<a class="download-link" href="">download</a>
<a class="list-link">open</a>
<a class="Hide">hide</a>
</div>
<div class="test-div"></div>
</li>
</ul>
Also note that I updated the demo to use jQuery v3.6.0, as 2.1.4 is very outdated.
Related
I'm working on a Vue poject and I let the user choose the width and height of app main container by clicking on each device specific icon (mobile, tablet, laptop and desktop). something like firefox responsive tool. how can I force elements inside the main container respond to it's own viewport rather than browser viewport?
I'm using UIKit width component to define my breakpoints. I know I can achieve this by adding/removing classes dynamically, but my Vue components are added dynamicallly by the user, so it's more complex.
I thought there might be a more generic way to do this. here's the sample code ( number of visible slides changes in defferent viewports and if my component is a grid element items inside it should wrap ( based on container width ) ):
<div id="main-container" :style="{width: deviceWidth, height: deviceHeight}">
<!-- Dynamically added component -->
<div class="uk-position-relative uk-visible-toggle uk-light" uk-slider>
<!-- UIKit Width classes -->
<ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3#s uk-child-width-1-4#m">
<li>
<img src="../../img/01.jpg" alt="">
<div class="uk-position-center uk-panel"><h1>1</h1></div>
</li>
<li>
<img src="../../img/02.jpg" alt="">
<div class="uk-position-center uk-panel"><h1>2</h1></div>
</li>
<li>
<img src="../../img/03.jpg" alt="">
<div class="uk-position-center uk-panel"><h1>3</h1></div>
</li>
<li>
<img src="../../img/04.jpg" alt="">
<div class="uk-position-center uk-panel"><h1>4</h1></div>
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
</div>
</div>
Explanation
This is a very simple, and minimal answer, it's literally been written to simply illustrate how you can tackle your problem, but as you can see within this answer, pressing the different buttons makes the containing element grow/shrink.
As you can see within this solution, all of the elements that are responsive will respond based on the parent element's size. It's really easy to achieve this if you use fixed sizes, like in my example.
Although, take note, I only selected to use a very minimal implementation, no use of Vue or anything sophisticated, this is a simple solution, using native technologies only.
Edit
After having learned exactly what you're looking for, the long story short is that there's no clean & easy way to do that, at least to my knowledge, your best bet would be to simply change & alter the classes, that, by far makes the most sense.
Because your question is somewhat vague, to me it appears that you're trying to execute logic similar to what #arieljuod has stated, where you're trying to run media queries on specific DOM elements rather than the user's viewport.
I'm sorry to inform you that to my knowledge there's no clean and easy way to achieve this, not to say that there isn't a way, I'm sure someone has found a way, but a clean, concise, easy to read, solution, I highly doubt there's such a solution.
const clickHandler = txt => {
let clName = '';
switch (txt) {
case 'Desktop':
clName = 'desktop';
break;
case 'Tablet':
clName = 'tablet';
break;
case 'Mobile':
clName = 'mobile';
break;
default:
clName = 'desktop';
}
document.getElementById("app").className = clName;
};
document.querySelectorAll("#sizes button").forEach(btn => {
btn.onclick = () => clickHandler(btn.textContent);
});
#sizes {
width: 100%;
display: block;
overflow: auto;
}
#sizes button {
float: left;
margin: 15px;
padding: 15px;
border: 1px solid black;
background: white;
box-sizing: border-box;
width: calc(33.33% - 30px);
}
#app {
height: 100vh;
background: #eee;
}
#app.desktop {
width: 960px;
}
#app.tablet {
width: 700px;
}
#app.mobile {
width: 320px;
}
.col-2 {
display: block;
overflow: auto;
}
.col-2>* {
float: left;
width: calc(50% - 30px);
padding: 15px;
margin: 15px;
box-sizing: border-box;
border: 1px solid black;
}
/* Just for a demo */
#redBlock {
background: red;
height: 100px;
width: 75%;
}
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>
<div id="sizes">
<button>Desktop</button>
<button>Tablet</button>
<button>Mobile</button>
</div>
<div id="app" class="desktop">
<div class="col-2">
<p>Hello</p>
<p>World!</p>
</div>
<div id="redBlock"></div>
<div uk-slider>
<div class="uk-position-relative uk-visible-toggle uk-light">
<ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3#s uk-child-width-1-4#m">
<li>
<img src="https://getuikit.com/docs/images/slider1.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>1</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider2.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>2</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider3.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>3</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider4.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>4</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider5.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>5</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider1.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>6</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider2.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>7</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider3.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>8</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider4.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>9</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider5.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>10</h1>
</div>
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
</div>
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>
</div>
Possible Solution
What I would do in this scenario is as stated above, alter classes on the slider, like so, I mean you could use extra/additional logic to check the user's width & whatnot, but this is possibly the most simplistic approach possible.
const clickHandler = txt => {
const slider = document.getElementById("mySlider");
let clName = '';
switch (txt) {
case 'Desktop':
clName = 'desktop';
slider.className = 'uk-slider-items uk-child-width-1-4';
break;
case 'Tablet':
clName = 'tablet';
slider.className = 'uk-slider-items uk-child-width-1-3';
break;
case 'Mobile':
clName = 'mobile';
slider.className = 'uk-slider-items uk-child-width-1-2';
break;
default:
clName = 'desktop';
slider.className = 'uk-slider-items uk-child-width-1-4';
}
document.getElementById("app").className = clName;
};
document.querySelectorAll("#sizes button").forEach(btn => {
btn.onclick = () => clickHandler(btn.textContent);
});
#sizes {
width: 100%;
display: block;
overflow: auto;
}
#sizes button {
float: left;
margin: 15px;
padding: 15px;
border: 1px solid black;
background: white;
box-sizing: border-box;
width: calc(33.33% - 30px);
}
#app {
height: 100vh;
background: #eee;
}
#app.desktop {
width: 960px;
}
#app.tablet {
width: 700px;
}
#app.mobile {
width: 320px;
}
.col-2 {
display: block;
overflow: auto;
}
.col-2>* {
float: left;
width: calc(50% - 30px);
padding: 15px;
margin: 15px;
box-sizing: border-box;
border: 1px solid black;
}
/* Just for a demo */
#redBlock {
background: red;
height: 100px;
width: 75%;
}
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>
<div id="sizes">
<button>Desktop</button>
<button>Tablet</button>
<button>Mobile</button>
</div>
<div id="app" class="desktop">
<div class="col-2">
<p>Hello</p>
<p>World!</p>
</div>
<div id="redBlock"></div>
<div uk-slider>
<div class="uk-position-relative uk-visible-toggle uk-light">
<ul id="mySlider" class="uk-slider-items uk-child-width-1-4">
<li>
<img src="https://getuikit.com/docs/images/slider1.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>1</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider2.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>2</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider3.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>3</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider4.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>4</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider5.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>5</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider1.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>6</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider2.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>7</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider3.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>8</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider4.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>9</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider5.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>10</h1>
</div>
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
</div>
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>
</div>
How not to add a class to a block that does not have a class of foot-items? When I click on "Link", still the foot-active class is added and removed, even though this foot-menu does not have a class of foot-items, like the b condition was written.
$(document).on('click', '.foot-title', function(e){
if ($('.foot-menu').hasClass('foot-items')) {
$(this).parent().toggleClass('foot-active');
}
});
html, body {
margin: 0;
padding: 0;
}
.link {
text-decoration: none;
color: #ddd;
}
.menu {
display: none;
}
.foot-active .menu {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="foot-menu foot-items">
<div class="foot-title">
More
</div>
<div class="menu">
<div class="menu-item">
<a href="#">
<span class="link">
Lorem 1
</span>
</a>
</div>
<div class="menu-item">
<a href="#">
<span class="link">
Lorem 1
</span>
</a>
</div>
<div class="menu-item">
<a href="#">
<span class="link">
Lorem 1
</span>
</a>
</div>
</div><!-- .b-menu -->
</div>
<div class="foot-menu">
<div class="foot-title">
Link
</div>
</div>
I also tried through .each(), but it did not work out.
$('.foot-title').each(function() {
$(this).click(function() {
$('.foot-menu').each(function(i) {
if ($(this).hasClass('foot-items')) {
$(this).toggleClass('foot-active');
}
});
});
});
$(document).on('click', '.foot-items.foot-menu', function(e){
$(this).toggleClass('foot-active');
});
html, body {
margin: 0;
padding: 0;
}
.link {
text-decoration: none;
color: #ddd;
}
.menu {
display: none;
}
.foot-active .menu {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="foot-menu foot-items">
<div class="foot-title">
More
</div>
<div class="menu">
<div class="menu-item">
<a href="#">
<span class="link">
Lorem 1
</span>
</a>
</div>
<div class="menu-item">
<a href="#">
<span class="link">
Lorem 1
</span>
</a>
</div>
<div class="menu-item">
<a href="#">
<span class="link">
Lorem 1
</span>
</a>
</div>
</div><!-- .b-menu -->
</div>
<div class="foot-menu">
<div class="foot-title">
Link
</div>
</div>
If your aim is to add click event only with class foot-items and foot-menu, You can change your click event on .foot-items.foot-menu. No need to trigger it each time.
When checking for the class foot-items you need to do it based on the clicked element so you need to do:
$(this).parent()
Hope this helps :)
$(document).on('click', '.foot-title', function(e){
if ($(this).parent().hasClass('foot-items')) {
$(this).parent().toggleClass('foot-active');
console.log(".foot-active added or removed");
}
});
html, body {
margin: 0;
padding: 0;
}
.link {
text-decoration: none;
color: #ddd;
}
.menu {
display: none;
}
.foot-active .menu {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="foot-menu foot-items">
<div class="foot-title">
More
</div>
<div class="menu">
<div class="menu-item">
<a href="#">
<span class="link">
Lorem 1
</span>
</a>
</div>
<div class="menu-item">
<a href="#">
<span class="link">
Lorem 1
</span>
</a>
</div>
<div class="menu-item">
<a href="#">
<span class="link">
Lorem 1
</span>
</a>
</div>
</div><!-- .b-menu -->
</div>
<div class="foot-menu">
<div class="foot-title">
Link
</div>
</div>
so i need to make lis with the same data-attribute the same height, using plain javascript and no tables, however i'm struggling with this task, mainly getting lis with the same data attribute. Here's the code: https://codepen.io/benasl/pen/ooLrON?editors=1010
ul {
list-style: none;
padding: 0;
width: 100%;
}
li {
padding: 5px 10px;
display:block;
position:relative;
height: 100%;
}
p {
width: 100%;
}
<div class="row">
<div class="col-sm-4">
<ul>
<li class="item" data-item="1"><p>testt tte sttest testtesttesttes ttesttes ttesttesttest</p></li>
<li class="item" data-item="2"><p>test</p></li>
<li class="item" data-item="3"><p>test aaaaaaaa aaaaaaaaa a aaaa aaaaaaaa</p></li>
<li class="item" data-item="4"><p>test</p></li>
</ul>
</div>
<div class="col-sm-4">
<ul>
<li class="item" data-item="1"><p>testt tte sttest testtesttesttes ttesttasdsadasd es ttesttesttestas asdasdasdsad asdasdasd</p></li>
<li class="item" data-item="2"><p>test</p></li>
<li class="item" data-item="3"><p>test aaaaaaaa aaaaaaaaa a aaaa aaaaaaaa</p></li>
<li class="item" data-item="4"><p>test</p></li>
</ul>
</div>
<div class="col-sm-4">
<ul>
<li class="item" data-item="1"><p>testt tte sttest testtesttesttes ttesttes ttesttesttest</p></li>
<li class="item" data-item="2"><p>test</p></li>
<li class="item" data-item="3"><p>test aaaaaaaa aaaaaaaaa a aaaa aaaaaaaa</p></li>
<li class="item" data-item="4"><p>test</p></li>
</ul>
</div>
</div>
Look into the attribute selector in CSS. Here is a simple guide.
You may want something like:
li[data-item="1"] {
height: 5px;
}
<ul class="dropdown-menu wm_search_div" ng-show="searchDivShow">
<li ng-repeat="user in searchUserList">
<a href="javascript:void(0);" class="wm_clearfix3">
<img ng-src="{{user.faceIcon}}" class="pull-left wm_search_uface"/>
<div class="pull-left wm_ml5">
<div class="wm_search_uname" ng-bind="user.username"></div>
<span ng-bind="'账号：'+user.account" class="wm_search_uacc"></span>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);" class="wm_clearfix3">
<img ng-src="resources/images/default_faceicon.jpg" class="pull-left wm_search_uface"/>
<div class="pull-left wm_ml5">
<div class="wm_search_uname">fdsfsfds</div>
<span class="wm_search_uacc">fsdfds</span>
</div>
</a>
</li>
</ul>
.wm_clearfix3{
overflow: auto;
height: 1%;
}
I added a clearfix css class in my label,and it was working well when I had not add angular codes into my HTML.But when I added angular into HTML,the clearfix class became don't work.The cut picture like this:
Maybe because of 'ng-repeat'?Can somebody help me?
You don't need to add ng-class unless you are adding a class with logic. So just add class is enough
Why use 'ng-class' if you have not an angular expression ?
try with:
ng-class="{wm_clearfix3}"
or:
.wm_clearfix3{
overflow: auto;
height: 1%;
clear: both;
}
Does the solution at the below JSFiddle link help you out at all?
https://jsfiddle.net/6vm4csjb/
ul {
list-style: none;
}
[class*="wm_clearfix"] {
display: inline-block;
width: 100%;
}
[class*="wm_clearfix"]:before, [class*="wm_clearfix"]:after {
display: table;
content: " ";
}
img {
display: inline-block;
width: 20px;
height: 20px;
}
.pull-left {
float: left;
}
<ul class="dropdown-menu wm_search_div" ng-show="searchDivShow">
<li ng-repeat="user in searchUserList">
<a href="javascript:void(0);" class="wm_clearfix3">
<img ng-src="{{user.faceIcon}}" class="pull-left wm_search_uface"/>
<div class="pull-left wm_ml5">
<div class="wm_search_uname" ng-bind="user.username"></div>
<span ng-bind="'账号：'+user.account" class="wm_search_uacc"></span>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);" class="wm_clearfix3">
<img ng-src="resources/images/default_faceicon.jpg" class="pull-left wm_search_uface"/>
<div class="pull-left wm_ml5">
<div class="wm_search_uname">fdsfsfds</div>
<span class="wm_search_uacc">fsdfds</span>
</div>
</a>
</li>
</ul>
I have a problem with my jQuery code. I would like to click on one of the previewed text that belongs to that button and the other was eventually closed.
The text should go down using slideDown() and disappear using slideUp(). How it could adjust to it did not make a mess?
HTML:
<div class="ata-pdf-wrapper ata-btn-video">
<a title="Videos">
<span>Videos</span>
<span> </span>
</a>
</div>
<div class="ata-pdf-wrapper ata-btn-pdf">
<a title="Download PDF">
<span>Download</span>
<span> </span>
</a>
</div>
<br/>
<br/>
<div class="ata-media-wrapper">
<div class="ata-downloads">
<ul>
<li>
<a title="DQA (free)" href="http://www.ataccama.com/en/products/dq-analyzer/download.html">DQA (free)</a>
</li>
<li>
<a title="Product Sheet" href="http://www.ataccama.com/dq-analyzer-product-sheet">Product Sheet</a>
</li>
<li>
<a title="User Guide" href="https://ataccama.s3.amazonaws.com/documentation/9.x.x/DQA/Ataccama%20DQA%209%20User%20Guide.pdf">User Guide</a>
</li>
<li>
<a title="Frequently Asked Questions" href="https://ataccama.s3.amazonaws.com/documentation/9.x.x/DQA/DQA%209%20FAQ.pdf">Frequently Asked Questions</a>
</li>
</ul>
</div>
<div class="ata-videos">
<ul>
<li>
<a title="Creating a Profile" href="https://www.youtube.com/watch?v=WC_VZ5z5q3E">Creating a Profile</a>
</li>
<li>
<a title="Understanding Profiling Results" href="https://www.youtube.com/watch?v=2L35k080ovQ">Understanding Profiling Results</a>
</li>
<li>
<a title="Advanced Profiling" href="https://www.youtube.com/watch?v=nQGBYkTXNPc">Advanced Profiling</a>
</li>
<li>
<a title="Email Analysis" href="https://www.youtube.com/watch?v=u45G0yo9sE4">Email Analysis</a>
</li>
</ul>
</div>
</div>
jQuery:
$(document).ready(function() {
$(".ata-pdf-wrapper.ata-btn-video").click(function(){
if ($(".ata-pdf-wrapper.ata-btn-video").hasClass("active")) {
$(".ata-media-wrapper").hide();
$(".ata-videos").fadeIn(500);
$(".entry-content").removeClass("shadow");
$(".ata-pdf-wrapper.ata-btn-video").removeClass("active");
} else{
$(".ata-pdf-wrapper.ata-btn-video").addClass("active");
$(".ata-media-wrapper").show();
$(".ata-videos").slideDown(500);
$(".entry-content").addClass("shadow");
};
});
$(".ata-pdf-wrapper.ata-btn-pdf").click(function(){
if ($(".ata-pdf-wrapper.ata-btn-pdf").hasClass("active")) {
$(".ata-media-wrapper").hide();
$(".ata-downloads").fadeIn(500);
$(".entry-content").removeClass("shadow");
$(".ata-pdf-wrapper.ata-btn-pdf").removeClass("active");
} else{
$(".ata-pdf-wrapper.ata-btn-pdf").addClass("active");
$(".ata-media-wrapper").show();
$(".ata-downloads").slideDown(500);
$(".entry-content").addClass("shadow");
};
});
});
The code is on jsFiddle.
If y understand what you want to do with those lists, something not messy is the following example.
$(document).ready(function() {
$(".ata-pdf-wrapper.ata-btn-video").click(function(ev){
var $currentTarget = $(ev.currentTarget);
if ($currentTarget.hasClass("active")) {
$(".ata-videos").slideUp(500);
$(".entry-content").removeClass("shadow");
$currentTarget.removeClass("active");
} else{
$currentTarget.addClass("active");
$(".ata-videos").slideDown(500);
$(".entry-content").addClass("shadow");
};
});
$(".ata-pdf-wrapper.ata-btn-pdf").click(function(ev){
var $currentTarget = $(ev.currentTarget);
if ($currentTarget.hasClass("active")) {
$(".ata-downloads").slideUp(500);
$(".entry-content").removeClass("shadow");
$currentTarget.removeClass("active");
} else{
$currentTarget.addClass("active");
$(".ata-downloads").slideDown(500);
$(".entry-content").addClass("shadow");
};
});
});
.ata-pdf-wrapper a {
display: inline-block;
background: #55d239;
border-radius: 20px;
text-align: center;
border: 2px solid #fff;
cursor: pointer;
}
.ata-pdf-wrapper a > span {
float: left;
padding: 6px 20px 5px 25px;
color: #fff;
}
.ata-pdf-wrapper.ata-btn-video a > span + span,
.ata-pdf-wrapper.ata-btn-pdf a > span + span,
.ata-pdf-wrapper a > span + span {
float: right;
width: 11px;
height: 18px;
padding: 10px 10px 10px 18px;
border-left: 1px solid #45bd2a;
}
.ata-pdf-wrapper a:hover,
.ata-pdf-wrapper.active a {
border: 2px solid #309319;
}
.ata-pdf-wrapper.ata-btn-video {
right: 200px;
}
.ata-downloads,
.ata-videos {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="ata-pdf-wrapper ata-btn-video">
<a title="Videos">
<span>Videos</span>
<span> </span>
</a>
</div>
<div class="ata-videos">
<ul>
<li>
<a title="Creating a Profile" href="https://www.youtube.com/watch?v=WC_VZ5z5q3E">Creating a Profile</a>
</li>
<li>
<a title="Understanding Profiling Results" href="https://www.youtube.com/watch?v=2L35k080ovQ">Understanding Profiling Results</a>
</li>
<li>
<a title="Advanced Profiling" href="https://www.youtube.com/watch?v=nQGBYkTXNPc">Advanced Profiling</a>
</li>
<li>
<a title="Email Analysis" href="https://www.youtube.com/watch?v=u45G0yo9sE4">Email Analysis</a>
</li>
</ul>
</div>
<div class="ata-pdf-wrapper ata-btn-pdf">
<a title="Download PDF">
<span>Download</span>
<span> </span>
</a>
</div>
<div class="ata-downloads">
<ul>
<li>
<a title="DQA (free)" href="http://www.ataccama.com/en/products/dq-analyzer/download.html">DQA (free)</a>
</li>
<li>
<a title="Product Sheet" href="http://www.ataccama.com/dq-analyzer-product-sheet">Product Sheet</a>
</li>
<li>
<a title="User Guide" href="https://ataccama.s3.amazonaws.com/documentation/9.x.x/DQA/Ataccama%20DQA%209%20User%20Guide.pdf">User Guide</a>
</li>
<li>
<a title="Frequently Asked Questions" href="https://ataccama.s3.amazonaws.com/documentation/9.x.x/DQA/DQA%209%20FAQ.pdf">Frequently Asked Questions</a>
</li>
</ul>
</div>
<br/> <br/>