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

Using Jquery 1.5 to send Ajax requests with GET data even when using the POST method

(Apologies for any errors in my English, it is not my native language) I have a project that utilizes codeigniter+JqueryUI. I am considering upgrading the JQuery version to 1.5 mainly because I heavily rely on ajax calls, and any speed improvements would b ...

jqueryajaxjquery-uicodeigniterautocomplete

Is it feasible to extract color information from Google Calendar using Fullcalendar jQuery?

Is there a way to automatically retrieve the color set on a Google calendar for events? While looking at gcal.js, I didn't find any information about this feature, but in Google's JSON API (json-c), there is a mention of color. Could it be possi ...

jqueryjsonfullcalendar

Hide the popup by clicking anywhere outside of it

I need help with a code that involves a button triggering a popup, and I want the user to be able to close the popup by clicking outside of it when it's open. My goal is to assign the method "Close()" to the event listener that detects clicks outside ...

javascripthtmlcss

What steps should I take to troubleshoot and resolve a malfunctioning jQuery hoverOut function?

There seems to be a issue with the code. The website successfully detects when the mouse hovers over the element and logs it in the console, however, there is an error when trying to log out when the mouse leaves the element. $('.designer'). ...

htmljquery

Ways to display URL parameters on an HTML page without using PHP

I'm currently working on a website using HTML (without PHP) and I'm facing an issue with displaying URL parameters on an appointment confirmation page. The appointment details are being successfully passed through the URL parameters, but I'm ...

javascripthtmlparameters

Efficiently sanitizing a JavaScript object using the replace() method in JavaScript

I have a data object structured like this {"paymethod_id":1,"business_id":76,"delivery_type":"1","driver_tip":0,"delivery_zone_id":6569,"delivery_datetime":null,"location":{&qu ...

javascriptjsonobjectjsobject

Steps to eliminate the gap between the link element and toggler in Bootstrap 4

Incorporating the code below will create a navigation bar with a cart icon in Bootstrap 4, indicated by the images. The expanded view showcases the cart next to the search section on the right. When viewed on smaller devices in collapsed mode, it should al ...

htmlcsstwitter-bootstrapbootstrap-4

Leverage PHP email functionality by incorporating variables within the email

I am utilizing Google to create a QR code using a random number. Once the number is generated, it is saved as a variable. My intention is to incorporate this variable within an image link in an email. Below is an example of how I want to achieve this: Th ...

phphtmlemail

I wonder which Material Design repository is the source of this library

I am attempting to replicate the CSS style used in this particular Material Design-inspired web application: https://i.stack.imgur.com/utalx.png After exploring Materialize CSS and MUI, I have not been able to pinpoint the exact framework responsible for ...

htmlcssreactjsmaterial-design

What are the differences between incorporating JavaScript directly into HTML and writing it in a separate file?

I need help converting this JavaScript embedded in HTML code into a standalone JavaScript file. I am creating a toggle switch that, when clicked, should go to a new page after the transformation. I am looking for the non-embedded version of the function. H ...

javascripthtmljquerycssonclick

Provide two values and complete the third one

I have a form with three input fields. I want to fill out two of the fields and have the third field automatically filled in. Here is how it should work: - I fill out the first and second fields, and the third field calculates itself - I fill out ...

javascriptjqueryinput

Is there a way to retrieve metadata from a web URL, like how Facebook automatically displays information when we share a URL in a status update?

Is there a way to fetch metadata such as title, logo, and description from a website URL using AngularJS or JavaScript? I am looking for a solution similar to Facebook's status update feature that automatically loads metadata when you paste a website ...

javascriptajaxangularjs

Assigning a custom class to the cdk-overlay-pane within a mat-select component is restricted to Angular Material version 10.2.7

I attempted the code below, but it only works for angular material 11. My requirement is to use only angular material 10. providers: [ { provide: MAT_SELECT_CONFIG, useValue: { overlayPanelClass: 'customClass' } } ] There a ...

javascriptangulartypescriptangular-materialangular10

Locating Elements in Protractor: Exploring Nested Elements within an Element that is Also a Parent Element Elsewhere on the Page

<div class="base-view app-loaded" data-ng-class="cssClass.appState"> <div class="ng-scope" data-ng-view=""> <div class="ng-scope" data-ng-include="'partial/navigation/navigation.tpl.html'"> <div class="feedback-ball feedback- ...

javascriptangularjstestingselenium-webdriverprotractor

Discovering the meeting point where two dives converge

Is there a method to change the color of the overlapped common part of two animated circles? ...

javascriptcss

"Chrome's failure to fire the appCache event for HTML5 has left developers scratching

Currently, I am working on an offline website using HTML5. In my JavaScript file, I have written some code for event listeners; however, the events are not being fired. var appCache = window.applicationCache; if (appCache) { appCache.addEventListener ...

html

Swap out internal Wordpress hyperlinks for Next.js Link Component

Currently, I am working on a project where I'm using WordPress as a headless CMS with GraphQL for my Next.js app. Most aspects are running smoothly except for the internal content links within articles that are fetched through the WP API. These links ...

javascriptwordpressgraphqlnext.js

JQuery Datatables: Struggling to make JQuery function work following AJAX update

Watch this screencast to get a clearer understanding of the issue.... I'm currently working on my first project involving AJAX, and I'm encountering some obstacles. The datatable is loading user details from a JSON output using AJAX. Each row ...

javascriptjqueryjsonajaxdatatable

Having trouble centering the links in the Bootstrap navbar?

I've been struggling to center the links/tabs on my Bootstrap navbar for days now and I just can't seem to get it right. I've gone through countless similar questions without any luck. Something must be off in my code or maybe I'm not t ...

htmlcsstwitter-bootstrapnavbar

Show users who liked a post from 2 different collections in Meteor

How do I retrieve a list of users who have "liked" this post from a collection and display it in a template? Collections: likes: { "_id": 1234, "userId": "1dsaf8sd2", "postId": "123445" }, { "_id": 1235, "userId": "23f4g4e4", "pos ...

javascriptmongodbmeteormongodb-query