What is the best way to toggle the visibility of a Ul when a Div is clicked?

When I click on a Div Ul that I've inserted, it displays. Here's the corresponding code snippet:

<div class="menu-item">menu title</div>
<div class="plus"></div>
<div class="minus"></div>
<ul class="sub-item-menu">
<a href="index.php"><li>text</li></a>

<a href="index.php"><li>text</li></a>

<a href="index.php"><li>text</li></a>

<a href="index.php"><li>text</li></a>

<a href="index.php"><li>text</li></a>

<a href="index.php"><li>text</li></a>

</ul>
<div class="menu-item">title</div>
<div class="plus"></div>
<div class="minus"></div>
<ul class="sub-item-menu">
<a href="index.php"><li>text</li></a>

<a href="index.php"><li>text</li></a>

<a href="index.php"><li>text</li></a>

</ul>
</div>

Using jQuery:

$('.plus').click(function () {
    $('.sub-item-menu').slideDown();
    $('.plus').fadeOut(200);
    $('.minus').fadeIn(1000);
});

$('.minus').click(function () {
    $('.minus').fadeOut(2);
    $('.sub-item-menu').slideUp();
    $('.plus').fadeIn(1000);
});

CSS Style:

.plus {
    width:22px;
    height:22px;
    background:url(images/plus.png) no-repeat;
    float:left;
    margin-top:-27px;
    margin-left:-5px;
    cursor:pointer;
}
.minus {
    width:22px;
    height:22px;
    background:url(images/minus.png) no-repeat;
    float:left;
    margin-top:-27px;
    margin-left:-5px;
    display:none;
    cursor:pointer;
}
.menu-item {
    background:url(images/menu-asli.png) repeat-x;
    width:197px;
    height:30px;
    margin-top:1px;
    font-family:"B Yekan";
    font-size:16px;
    padding-top:3px;
    padding-right:3px;
    margin-bottom:-2px;
}
.sub-item-menu, .sub-item-menu2 {
    margin-top:3px;
    width:198px;
    margin-right:1px;
    display:none;
    font-family:"B Yekan";
    font-size:14px;
}
.sub-item-menu a:link {
    text-decoration:none;
}
.sub-item-menu li {
    background:#ff0084;
    margin-bottom:1px;
    padding-right:3px;
    color:#FFF;
}

However, clicking on one of the menus and sub-menus causes both to be displayed simultaneously.

Thanks.

jqueryhtmlcss

Answer №1

If you follow Ed's suggestion or simply improve the organization of your code, you can then make use of the siblings() function.

Ensure that your HTML is structured within well-defined divs and tidy up the li elements.

<div class="menu-item">menu title
    <div class="plus">+++</div>
    <div class="minus">---</div>
    <ul class="sub-item-menu">
        <li><a href="index.php">text</a>
        </li>
        <li><a href="index.php">text</a>
        </li>
        <li><a href="index.php">text</a>
        </li>
        <li><a href="index.php">text</a>
        </li>
        <li><a href="index.php">text</a>
        </li>
        <li><a href="index.php">text</a>
        </li>
    </ul>
</div>
<div class="menu-item">title
    <div class="plus">++</div>
    <div class="minus">--</div>
    <ul class="sub-item-menu">
        <li><a href="index.php">text</a>
        </li>
        <li><a href="index.php">text</a>
        </li>
        <li><a href="index.php">text</a>
        </li>
    </ul>
</div>

Utilize this and siblings() to locate the desired class elements in jQuery.

$('.plus').click(function () {
    $(this).siblings('.sub-item-menu').slideDown();
    $(this).fadeOut(200);
    $(this).siblings('.minus').fadeIn(1000);
});

$('.minus').click(function () {
    $(this).fadeOut(2);
    $(this).siblings('.sub-item-menu').slideUp();
    $(this).siblings('.plus').fadeIn(1000);
});

See a demonstration here: http://jsfiddle.net/nG53w/1/

Please note: I adjusted the plus and minus CSS for display purposes as I didn't have access to the background images. Revert these changes and remove the text in the divs to restore them to their original state.

Answer №2

When using jQuery selectors, it is important to note that they will target all elements with the specified class. For example:

$('.sub-item-menu').slideDown();

This code will cause both elements with the class "sub-item-menu" to slide down simultaneously.

To ensure proper functionality, each element should have a unique ID and be selected using the ID selector instead. For instance:

 $('#sub-item-menu1').slideDown();

If necessary, consider assigning different classes like "sub-item-menu2" to distinguish between multiple elements as mentioned in your CSS but missing from your HTML markup.

Additionally, make sure to differentiate between the plus and minus links by utilizing a similar approach. For example:

$('.minus').click(function () {

This will apply the click function to both elements identified by the class "minus."

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

The same size background effect

I am looking to create a list of names that are all the same size. How can I achieve this using Bootstrap? <ul class="list-unstyled"> <li> <a class="btn btn-xs btn-warning"> <span >Loren ipsum</span> </a> ...

csstwitter-bootstrap-3

Is it possible to update the underline color using CSS in Google Chrome?

I have been attempting to modify the color of the underline during a hover event by using spans. Surprisingly, it seems to be working fine in IE9 and Firefox 13.01, but unfortunately, it doesn't work properly in Chrome (it should be underlined in gold ...

htmlcssunderline

Tips on closing a fancybox in an ajax popup using a different version of jQuery

Encountering an issue with closing a fancybox popup when jquery is included in the popup page (using AJAX to include an external PHP page within the popup). Setting up the fancybox as shown below: $(".various3").fancybox({ 'ttype' : 'aja ...

ajaxfancyboxjquery

Updating disabled date picker appearance in Angular Material Design

I am currently developing a website using Angular Material. One of the components I am working with is a date picker. The issue I am facing is that the date picker has the popup functionality enabled, but the input itself is disabled, causing a dotted line ...

cssangularangular-material

The Glyphicon icon fails to appear on the initial page load and only shows up after refreshing the

I have been utilizing bootstrap.min.css from bootstrap v3.3.5 which I downloaded from http://getbootstrap.com and used it locally. However, I encountered an issue with glyphicons when running it on IE 9 and above. The glyphicon icon disappears on the first ...

javascriptjqueryhtmlcsstwitter-bootstrap

How can elements be displayed differently depending on the return value of a function?

Basically, I am looking to display different content based on the status of a job: Show 'Something1' when the job is not processing Show 'Something2' when the job is running and has a status of '0' Show 'Something3&apos ...

htmlangular

Is your 100% height not beginning at the top of the page?

The link provided showcases a tutorial that has a white column extending to the bottom of the browser. In this example, the white column begins from the very top, with a header in a different shade of grey covering it. In my scenario, I need the header to ...

css

What causes the input field to be cleared when updating the state hook on input change, thus preventing any text from being entered?

There is a challenge in creating a simple form that accepts two strings, stores them in state hooks, and clears itself onSubmit. The issue arises when updating the state hook via the input's onChange event handler, as it seems to clear whatever was ju ...

javascripthtmlreactjsweb3js

Capture and reroute the loading of stylesheets, images, and fonts coming from Gecko

Seeking guidance for a C# application utilizing geckofx. I am looking to intercept and redirect the loading of images, fonts, and style sheets. My goal is to potentially load these resources from a database. I've experimented with SetParentURIContentL ...

c#cssfirefoxgeckogeckofx

What is the best way to center numbers in a table cell while aligning them to the right?

In a table, I want to display numbers centered in a column but right-aligned as well. To achieve this: table { border: 1px solid black; } th { width: 200px; } td { text-align: center; } <table> <thead> <tr> <th& ...

htmlcsshtml-tableflexboxalignment

Problem encountered when implementing multiple filters in Vanilla JavaScript

I am facing an issue with my HTML page that contains multiple filters using Vanilla JavaScript (no jQuery). The filtering process involves counting matches of filter selections against the data attributes of each element. However, I'm puzzled as to w ...

javascripthtml

The alignment of the ml-auto class is not properly positioning the navbar links to the right

I've been using the reactstrap library and following this guide: In the example provided, the <nav className='ml-auto' navbar> is pushing the <NavItem> to the right. However, in my implementation (which is very similar to the ex ...

cssreactjsflexboxbootstrap-4reactstrap

Modifying the font of a WebView on an existing Android site

I've been looking for a solution to my problem for days with no luck. Can someone please take a look: Input: a WebView with a web already loaded. Output: change the font of the loaded web inside the WebView. Here's what I've tried so far: ...

androidcssfontswebview

Issue with the format of incoming data in Ajax post request when working with Django framework

Hello everyone, I am currently working on a script to send a post request to my Django backend. My goal is to have the data in Json format. <input id ="my" type="submit" onclick="me()"/> <script> function me() { var data2 =JSON.stringif ...

pythonjquerypost

Transferring identifier from ashx page to aspx label or hidden field

I am working on an autocomplete textbox that retrieves data from a database and displays results as the user types. using (SqlCommand cmd = new SqlCommand()) { cmd.CommandText = "select (Patient_First_Name+' '+Patient_Last_Name+' '+ ...

jqueryasp.netajaxautocompleteashx

Is there a way to determine if content is present within a given div element?

I have created a sample code where clicking on the "Next" button displays the next content of the page. However, if you click one more time on it when there is no content left, an empty page is shown. How can I determine whether content is available insi ...

javascriptjqueryhtmlcss

Automatically updating values using jQuery AJAX

My table consists of rows structured like this: <tr> <td> <div class='tempo' id='<?php print $id;?>'></div> </td> </tr> In addition, I am utilizing the following jQuery function: var ...

javascriptphpjqueryajax

New space is formed as the input box gains focus on the signin field

I'm currently working on a sign-in page and implementing JQuery. Everything seems to be functioning properly except for a minor issue. The problem is that when the password field gains focus, it creates extra space in IE 8 and later versions only. Th ...

javascriptjqueryhtmlcssinternet-explorer-8

Tips for aligning text to the right within a div using the "justify" text-align property

I want the final sentence of my content to be aligned to the right side while the rest remains justified. I attempted using a <span> within a <p> tag, but it did not work as expected: span.activity-conclusion { font:22px 'Open Sans ...

css

Move a div element into another div element in HTML

I have been attempting to create a draggable green div that stays within the boundaries of another div with a border. Here is my progress so far. Check it out here Allow me to illustrate: This is what I want And this is what I don't want The gr ...

jqueryhtmlcss