Turn only one bracket on the accordion

When clicking on a specific header, I want only one chevron to rotate instead of all the chevrons rotating. I am currently unsure how to specify which chevron should rotate individually. My project is in ASP.NET MVC 5 and I am using razor view to loop through a list.

Index

@{
    foreach (var item in Model)
    {
        <div class="accordion">
            <a href="#"><h4>@item.Title</h4><i class="fa fa-chevron-right rotate"></i></a>
        </div>
        <div class="accordion-desc">
            <h3>@Resource.AccordionProjectLead</h3>
            <h4>Kay Wiberg</h4>
            <h3>@Resource.AccordionDescription</h3>
            <p>
            @item.Description
            <p> 
            <div class ="link">
                <a href="@item.Url">@Resource.AccordionGoTo</a>
            </div>
        </div>
    }
}

CSS for the rotating chevron

.rotate {
  -moz-transition: all 0.1s linear;
  -webkit-transition: all 0.1s linear;
  transition: all 0.1s linear;
}

.rotate.down {
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

JS for accordion and chevron

$(document).ready(function() {
  $(".accordion-desc").fadeOut(0);
  $(".accordion").click(function() {
    $(".accordion-desc").not($(this).next()).slideUp('fast');
    $(this).next().slideToggle(400);
  });
});

$(".accordion").click(function() {
  $(".rotate").toggleClass("down");
});

from the browser:

<div class="container">
  <div class="accordion">
    <a href="#">
      <h4>Test Site</h4><i class="fa fa-chevron-right rotate down"></i></a>
  </div>
  <div class="accordion-desc" style="display: none;">
    <h3>Projektledare</h3>
    <h4>Kay Wiberg</h4>
    <h3>Beskrivning</h3>
    <p>

    </p>      
    <div class="link">
      <a href="">Gå till</a>
    </div>
  </div>
  <div class="accordion">
    <a href="#">
      <h4>Test site 2</h4><i class="fa fa-chevron-right rotate"></i></a>
  </div>
  <div class="accordion-desc" style="display: none;">
    <h3>Projektledare</h3>
    <h4>Kay Wiberg</h4>
    <h3>Beskrivning</h3>
    <p>
      Somthindsyvgds
    </p>
    <div class="link">
      <a href="">Gå till</a>
    </div>
  </div>

</div>

Answer №1

$(document).ready(function() {
  $(".accordion-desc").fadeOut(0);
  $(".accordion").click(function() {
    $(".accordion-desc").not($(this).next()).slideUp('fast');
    $(this).next().slideToggle(400);
  });
});

$(".accordion").click(function() {
  $(".accordion").not(this).find(".rotate").removeClass("down");
  $(this).find(".rotate").toggleClass("down");
});
.rotate {
  -moz-transition: all 0.1s linear;
  -webkit-transition: all 0.1s linear;
  transition: all 0.1s linear;
}

.rotate.down {
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.accordion {
background: blue;
}
.fa, h4 {
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
  <div class="accordion">
    <a href="#">
      <h4>Test Site</h4><i class="fa fa-chevron-right rotate down"></i></a>
  </div>
  <div class="accordion-desc" style="display: none;">
    <h3>Projektledare</h3>
    <h4>Kay Wiberg</h4>
    <h3>Beskrivning</h3>
    <p>

    </p>
    <div class="link">
      <a href="">Gå till</a>
    </div>
  </div>
  <div class="accordion">
    <a href="#">
      <h4>Test site 2</h4><i class="fa fa-chevron-right rotate"></i></a>
  </div>
  <div class="accordion-desc" style="display: none;">
    <h3>Projektledare</h3>
    <h4>Kay Wiberg</h4>
    <h3>Beskrivning</h3>
    <p>
      Updated description
    </p>
    <div class="link">
      <a href="">Gå till</a>
    </div>
  </div>

</div>

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 results from various <div> elements are displayed based on the selection made from the dropdown menu

<body> <label for="country">Country : </label> <select id="country"> <option>Please select</option> <option name="CountryRevenue">Revenue</option> <option name="CountryQuantity">Quantity ...

Effortlessly move and release Internet Explorer

Encountering drag and drop issues in Internet Explorer and Safari, while functioning correctly in Firefox 15 (untested on other versions). Dragging and dropping items between dropzones works in Safari, but sorting does not. In Internet Explorer, nothing wo ...

Ways to confirm if there have been any updates in Kendo Observable

Hey there! I have a form with specific fields that I've converted to Kendo Observable like this: var TITLE = $("#TITLE").val().trim(); var DESC = $("#DESC").val().trim(); Analysis.Kendo_VM = kendo.observable({ TITLE: TITLE != null ? TITLE : ...

Has any of my predecessors been hidden from view?

How can we detect if one of an element's ancestors has the display:none property set without having to traverse up the DOM Tree? ...

Why do my padding and font size fail to match the height of my container?

When setting the height of my boxes to match the height of my <nav>, I encountered overflow issues. Despite using a 10rem height for the nav and a 2.25rem font, calculating the padding as 10-2.25/2 didn't result in the desired outcome. Can someo ...

Pseudo-element fails to display in React when applied to a paragraph tag, even with display block property set

I am experiencing an issue where the pseudo element ::after is not appearing in my browser. I am currently working with React.js and Material UI's makeStyles. Here is the code snippet causing the problem: modalTitle: { borderBottom: '2px sol ...

What could be causing the invalid expression error to pop up in my Vue.js template?

I encountered an error within my vue single file component: Errors compiling template: invalid expression: Unexpected token { in {{ jobs[0].build_link }} Raw expression: v-bind:href="{{ jobs[0].build_link }}" The complete code causing the is ...

I created a design for a subscription form that appears aesthetically pleasing in Firefox, however, it does not maintain the same appearance in Opera. Any suggestions on how I can resolve this issue?

Why does my code display differently in Firefox compared to Opera? In Firefox, the height of input/text and input/submit elements are similar. However, in Opera, the height of the input/submit is reduced. This is the HTML code: < ...

Encountering a 403 error while using the ajax infinite loading script

Based on recommendations from my previous inquiry, I made the decision to incorporate an infinite loading script onto my page. However, every time the script is activated, a 403 - forbidden error occurs. Here is the JavaScript code snippet: jQuery(documen ...

Error: The JSON in app.js is invalid due to the unexpected token "C" at position 0

When I try to run this code snippet, I sometimes encounter an error message that says: SyntaxError: Unexpected token C in JSON at position 0. function fetchData(user_country) { fetch(`https://covid19-monitor-pro.p.rapidapi.com/coronavirus/cases_by_day ...

Retrieving ng-model using ng-change in AngularJS

Here is an example of the HTML code I am currently working with: <select ng-model="country" ng-options="c.name for c in countries" ng-change="filterByCountry"></select> This HTML snippet is being populated by the following object containing a ...

Sling file moving with an Ajax request

Currently, I am using an ajax call to delete files in the sling repository. Next, I need to figure out how to move files from 'copyFromURL' to 'moveToURL' utilizing the same method. $.ajax( { url : del_url, ...

Testing a function within a React functional component using jest.spyOn with React Testing Library can be accomplished with the following steps:

I'm currently working on a React component and I'm facing an issue with unit testing using React Testing Library. Specifically, I'm having trouble testing the handleClick function of the TestComponent using jest.spyOn(). Can anyone provide s ...

Using a JSP page to trigger a JavaScript function

I am attempting to execute an in-page JavaScript function from within a JSP page. Here is the code snippet, however, the JavaScript functions do not appear to be executing when the JSP page loads on the client side. Is there anything incorrect with the a ...

What is the best way to adjust the size of a background image on Safari

Using Chrome When using Chrome, the functionality is just like what's depicted in the image above. However, when using Safari The issue arises, as it does not work as expected in Safari. See below for the CSS code: background-image: url(r ...

Issue with function incorrectly computing values and returning NaN

My challenge is to develop a countdown timer, but it keeps returning NaN instead of counting down. I have multiple counters in place - one that counts down, another that counts up until the stop time specified by stoptime, and a third that kicks in after s ...

Exiting callback function in JavaScript

Is there a way to retrieve the return value from within a node.js/javascript callback function? function get_logs(){ User_Log.findOne({userId:req.user._id}, function(err, userlogs){ if(err) throw err; if(userlogs){ ...

When utilizing the `useLocation` hook, the location information appears to be missing

When utilizing a HashRouter, and inside a component making use of useLocation, there seems to be an inconsistency between the window.location object and the location object retrieved from useLocation. While writing this, I have observed that there might b ...

SyntaxError: Unexpected token : error caused by an invalid label

When attempting to perform an ajax call, I receive a JSON object as a response: { id: 6, success: "true" } The ajax call in question is the following: window.foobar = function(foo){ $.ajax({ url: "http://foobar.com/sites/foo/", ...

What is the best way to extract every nth digit from a number using a given reference point?

The subject of the title may cause confusion, so let me clarify my goal. With values of n = 51 and m = 24, I aim to achieve this result: [ {start:0, end:24}, {start:24, end:48}, {start:48, end:51} ] Currently, I have made progress on this ...