A pair of buttons each displaying a unique div block

I am facing an issue with my jQuery script. I want to be able to click on one of the previewed text associated with a button and then have the other one close automatically.

The desired effect is for the text to slide down using slideDown() and disappear using slideUp(). How can I ensure that this adjustment does not create any conflicts?

Here is the HTML structure:

<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>

This is the jQuery code snippet:

$(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");
        };
    });

});

You can view and test the code on jsFiddle.

javascriptjqueryhtmlcssshow-hide

Answer №1

If you have a clear understanding of how to utilize these lists, consider the example below for a neat implementation.

$(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/>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for keeping the scrollbar permanently at the bottom in JavaScript?

I am trying to implement a feature where a div always scrolls down automatically. scrollDown(){ var chat = this.conversation; this.conversation.scrollTop = chat.scrollHeight; } checkKeyPress(e){ if (e.key == "Enter") { this.scrollDown(); .. ...

javascriptscroll

Exception: Closing the database connection failed: db.close is not a callable

I have this Node.js application that utilizes MongoDb: const MongoClient = require('mongodb').MongoClient; const demoPerson = { name:'Jane', lastName:'Doe' }; const findKey = { name: 'Jane' }; MongoClient.connect( ...

javascriptnode.jsmongodbtypeerror

Unable to show the input's value

Need help in taking user input to display calculated values //html <div class="empty"> <h5> Enter Empty Seats </h5> <ion-item> <ion-input placeholder="Enter Number of Empties.." type="number" name="emptySeats" [( ...

javascripthtmltypescriptionic-framework

Counting the number of PHP inputs in a field

Hello, I am using a PHP script from Steve Dawson's website. To display the output on my HTML page, I am utilizing this AJAX script: <script> $.ajax({ type:'GET', url:'http://www.solariserat.se/count.php', data: ...

javascriptphpjqueryhtmlajax

Issue with Durandal dialog repositioning failing to function

I've been attempting to adjust the positioning of a Durandal dialog, but have been unsuccessful so far. The code snippet I'm using is as follows: this.compositionComplete = function (child, parent, context) { dialog.getContext().reposition(c ...

javascriptdurandal

Minimize the size of the MUI date selector widget

I've been incorporating the MUI date picker into a data list, but I'm looking to decrease the height of the input field and adjust the positioning of the close date and calendar icons. They're currently taking up too much space between them ...

htmlcssreactjswebmaterial-ui

What is causing the colorful background to not fully cover my page when I make the window smaller?

I'm currently designing a webpage that features a dynamic gradient background. Within this webpage are two columns - one displaying an image of a phone, and the other containing text. In full screen mode, everything looks perfect. The gradient stretch ...

javascripthtmlcss

Sort the inner array within an outer array

const dataArray = [ { id: 1, title: "stuffed chicken is tasty as anything", picture: "./img/chicken.jpg", tags: ["oooo", "tasty", "stuffed"] }, { id: 2, title: "noodles with shrimp and salad", ...

javascriptarrayssorting

Issue with Angular JS: Unable to remove uploaded files

I'm currently learning about AngularJS and I've been working on uploading and deleting files. However, I've come across an issue with deleting files. Below is the HTML code: <div> <ul> <li ng-repeat="files in table.proce ...

jqueryhtmlangularjs

Is there a method to modify the arrangement in which 3 specific HTML elements are displayed (i.e., their hierarchy in relation to one another)?

I have 3 "p" elements and I'm trying to find a way to change the order in which they load on the page using JS or CSS. Below is an example of what I've attempted so far. When you click on the first box labeled "about 1," it opens up and displays ...

javascripthtmlcss

Generating various arrays of data

I am currently facing an issue with creating separate datasets based on the month value. Despite my efforts, all month values are being combined into a single dataset in my code. Any assistance in dynamically generating different datasets would be greatly ...

javascriptjson

What could be the reason for the lack of CSS being applied to elements sharing the same class?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=de ...

htmlcss

What could be causing transition to not be recognized as an element in HTML?

<template> <header> <nav class="container"> <div class="branding"> <router-link class="header" :to="{name : 'Home'}">>FireBlogs</router-link> </div& ...

javascriptcssvue.js

The contents within the div element exceed the width of its parent element

Hey there, I'm currently working on a Rails application to showcase some links in a horizontal layout. The links are indeed displaying horizontally without wrapping, just as intended. However, I've noticed that the containing div is wider than th ...

htmlcssruby-on-rails

The issue with Webpack chunking is that no content is appearing because the chunks are not

For the past day, I've been trying to resolve a frustrating yet seemingly simple problem. My goal is to split my bundle.js file into chunks to enhance website loading speed. Below is my webpack.config file: module.exports = { devServer: { historyApi ...

javascriptreactjswebpackchunkschunking

Scale first, then drag and drop to fix a faulty registration

I'm currently working on a project that involves dragging and dropping the correct items onto a technical drawing, such as a motherboard. The user is presented with pictures of components like CPUs or DDR memory and must drag these items to their corr ...

jquerycssdrag-and-dropresponsive-designjquery-ui-draggable

Incorrect format for a date in AngularJS

I have a time input field where I am receiving the date and time format 'Thu Jan 01 1970 12:59:00 GMT+0530 (India Standard Time)', but I only want to display the time. Is there an issue with the time picker in AngularJS? Can anyone help me resolv ...

javascriptangularjs

The nodes on a 2-dimensional grid overlap each other when the browser window is resized

In my project, I have set up a grid with 24 rows and 64 columns, totaling to 24x64 nodes. However, I am facing an issue where the nodes overlap when I open the console window. I am looking for a solution to automatically resize all nodes based on changes ...

cssreactjs

Is there a way for me to track the number of times the local HTML document has been accessed?

Imagine we have a standalone HTML file that is sent to someone. Is there a way, possibly using third-party services, to track if the document has been opened without the user knowing? I thought about placing a PHP script on a "friendly" server and making ...

phphtmlajax

Adjust the position of a textarea on an image using a slider

Currently, I am exploring how to creatively position a textarea on an image. The idea is to overlay the text on the image within the textarea and then use a slider to adjust the vertical position of the text as a percentage of the image height. For instanc ...

javascripthtmlcss