All geek questions in one place

Toggle class based on accordion visibility

So, I really do not think it should be so difficult, but I worked on it for several hours and washed Stack, which helped me to bring this moment, but not all the way to where I need to be.

I have an accordion for the FAQ page. This part works. If I open it, it closes all the other open drops, just like I want.

My problem is that I have an arrow on the right side of my headline that extends with a font, amazing.

Here is my jQuery:

 $('.faq_page').find('.faq_header').click(function(){

      //Expand or collapse this panel
      $(this).next().slideToggle('fast');

      $(this).find('.faq_control i').toggleClass('fa-caret-down fa-caret-up');
      

      //Hide the other panels
      $(".faq_body").not($(this).next()).slideUp('fast');

    });
.width_container:after,
.width_container_small:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

.width_container,
.width_container_small { display: block; }
/* start commented backslash hack \*/
* html .width_container,
* html .width_container_small { height: 1%; }
.width_container,
.width_container_small { display: block; }
/* close commented backslash hack */

/********** FAQ Page **********/

.faq_page {
	margin: 80px 0 80px;
}

.faq_box {
	-webkit-box-shadow: 0px 0px 10px 0px rgba(35,31,32,1);
-moz-box-shadow: 0px 0px 10px 0px rgba(35,31,32,1);
box-shadow: 0px 0px 10px 0px rgba(35,31,32,1);
-ms-box-shadow: 0px 0px 10px 0px rgba(35,31,32,1);
-o-box-shadow: 0px 0px 10px 0px rgba(35,31,32,1);

	margin-bottom: 40px;
}

.faq_header {
	background: #231f20;
	padding: 20px 0;
}

.faq_title {
	float: left;
	width: 95%;
}

.faq_title h2 {
	color: #fff;
	margin: 0;
	font-size: 22px;
	font-weight: 300;
	text-align: left;
	font-family: 'Open Sans', sans-serif;
	padding-left: 20px;
}

.faq_control {
	float: right;
	width: 5%;
}

.faq_control i {
	color: #fff;
	font-size: 40px;
	line-height: 40px;

}

.faq_body {
	background: #e8e8e8;
	padding: 20px;
	display: none;
}

.faq_active {
	display: block;
}

.faq_body p {
	margin: 0;
	font-size: 16px;
	line-height: 36px;
	letter-spacing: 2px;
	font-weight: 400;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="faq_page">
		<div class="width_container_small">

			<div class="faq_box">
				<div class="faq_header">
					<div class="width_container">
						<div class="faq_title">
							<h2>This is a Frequently Aksed Question?</h2>
						</div>
						<div class="faq_control">
							<i class="fa fa-caret-up" aria-hidden="true"></i>
						</div>
					</div>
				</div>
				<div class="faq_body faq_active">
					<p>orem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mollis vitae sapien quis vestibulum. Integer mollis erat et enim placerat ullamcorper. Vivamus malesuada blandit justo, ut scelerisque nibh tempor vel. Cras mattis, erat eget facilisis suscipit, est magna elementum ex, quis facilisis erat tortor et metus. Vestibulum ante This is a</p>
				</div>
			</div>

			<div class="faq_box">
				<div class="faq_header">
					<div class="width_container">
						<div class="faq_title">
							<h2>This is a Frequently Aksed Question?</h2>
						</div>
						<div class="faq_control">
							<i class="fa fa-caret-down" aria-hidden="true"></i>

						</div>
					</div>
				</div>
				<div class="faq_body">
					<p>orem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mollis vitae sapien quis vestibulum. Integer mollis erat et enim placerat ullamcorper. Vivamus malesuada blandit justo, ut scelerisque nibh tempor vel. Cras mattis, erat eget facilisis suscipit, est magna elementum ex, quis facilisis erat tortor et metus. Vestibulum ante This is a</p>
				</div>
			</div>

			<div class="faq_box">
				<div class="faq_header">
					<div class="width_container">
						<div class="faq_title">
							<h2>This is a Frequently Aksed Question?</h2>
						</div>
						<div class="faq_control">
							<i class="fa fa-caret-down" aria-hidden="true"></i>
						</div>
					</div>
				</div>
				<div class="faq_body">
					<p>orem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mollis vitae sapien quis vestibulum. Integer mollis erat et enim placerat ullamcorper. Vivamus malesuada blandit justo, ut scelerisque nibh tempor vel. Cras mattis, erat eget facilisis suscipit, est magna elementum ex, quis facilisis erat tortor et metus. Vestibulum ante This is a</p>
				</div>
			</div>

		</div>
	</section>
Run codeHide result

, . , , , . , , , , , .

, script ( ), .

, , , , . , , . , , , , .

+4
2

js jQuery. , , , .

, ( ".faq_body: visible" ) , .

$('.faq_page').find('.faq_header').click(function(){
      $(this).toggleAccordion();

      //Hide the other panels
      //:visible finds all open panels, .prev finds their headers, 
      //.not ensures we aren't closing the one we just opened
      $(".faq_body:visible").prev('.faq_header').not($(this)).toggleAccordion();
    });

$.fn.toggleAccordion = function() {
  //Expand or collapse this panel
  $(this).next().slideToggle('fast');

  $(this).find('.faq_control i').toggleClass('fa-caret-down fa-caret-up');
}
.width_container:after,
.width_container_small:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

.width_container,
.width_container_small { display: block; }
/* start commented backslash hack \*/
* html .width_container,
* html .width_container_small { height: 1%; }
.width_container,
.width_container_small { display: block; }
/* close commented backslash hack */

/********** FAQ Page **********/

.faq_page {
	margin: 80px 0 80px;
}

.faq_box {
	-webkit-box-shadow: 0px 0px 10px 0px rgba(35,31,32,1);
-moz-box-shadow: 0px 0px 10px 0px rgba(35,31,32,1);
box-shadow: 0px 0px 10px 0px rgba(35,31,32,1);
-ms-box-shadow: 0px 0px 10px 0px rgba(35,31,32,1);
-o-box-shadow: 0px 0px 10px 0px rgba(35,31,32,1);

	margin-bottom: 40px;
}

.faq_header {
	background: #231f20;
	padding: 20px 0;
}

.faq_title {
	float: left;
	width: 95%;
}

.faq_title h2 {
	color: #fff;
	margin: 0;
	font-size: 22px;
	font-weight: 300;
	text-align: left;
	font-family: 'Open Sans', sans-serif;
	padding-left: 20px;
}

.faq_control {
	float: right;
	width: 5%;
}

.faq_control i {
	color: #fff;
	font-size: 40px;
	line-height: 40px;

}

.faq_body {
	background: #e8e8e8;
	padding: 20px;
	display: none;
}

.faq_active {
	display: block;
}

.faq_body p {
	margin: 0;
	font-size: 16px;
	line-height: 36px;
	letter-spacing: 2px;
	font-weight: 400;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="faq_page">
		<div class="width_container_small">

			<div class="faq_box">
				<div class="faq_header">
					<div class="width_container">
						<div class="faq_title">
							<h2>This is a Frequently Aksed Question?</h2>
						</div>
						<div class="faq_control">
							<i class="fa fa-caret-up" aria-hidden="true"></i>
						</div>
					</div>
				</div>
				<div class="faq_body faq_active">
					<p>orem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mollis vitae sapien quis vestibulum. Integer mollis erat et enim placerat ullamcorper. Vivamus malesuada blandit justo, ut scelerisque nibh tempor vel. Cras mattis, erat eget facilisis suscipit, est magna elementum ex, quis facilisis erat tortor et metus. Vestibulum ante This is a</p>
				</div>
			</div>

			<div class="faq_box">
				<div class="faq_header">
					<div class="width_container">
						<div class="faq_title">
							<h2>This is a Frequently Aksed Question?</h2>
						</div>
						<div class="faq_control">
							<i class="fa fa-caret-down" aria-hidden="true"></i>

						</div>
					</div>
				</div>
				<div class="faq_body">
					<p>orem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mollis vitae sapien quis vestibulum. Integer mollis erat et enim placerat ullamcorper. Vivamus malesuada blandit justo, ut scelerisque nibh tempor vel. Cras mattis, erat eget facilisis suscipit, est magna elementum ex, quis facilisis erat tortor et metus. Vestibulum ante This is a</p>
				</div>
			</div>

			<div class="faq_box">
				<div class="faq_header">
					<div class="width_container">
						<div class="faq_title">
							<h2>This is a Frequently Aksed Question?</h2>
						</div>
						<div class="faq_control">
							<i class="fa fa-caret-down" aria-hidden="true"></i>
						</div>
					</div>
				</div>
				<div class="faq_body">
					<p>orem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mollis vitae sapien quis vestibulum. Integer mollis erat et enim placerat ullamcorper. Vivamus malesuada blandit justo, ut scelerisque nibh tempor vel. Cras mattis, erat eget facilisis suscipit, est magna elementum ex, quis facilisis erat tortor et metus. Vestibulum ante This is a</p>
				</div>
			</div>

		</div>
	</section>
Hide result
+1

:

  • "faq_box"
  • "faq_box"
  • faq fa-caret-down
  • "faq_box" fa-caret

$(function () {
  $('.faq_page').find('.faq_header').on('click', function(e) {
    var currFaqBox = $(this).closest('.faq_box');
    var otherFaqBox = currFaqBox.siblings().not(currFaqBox);

    // hide the other faq box
    otherFaqBox.find('.faq_body').slideUp('fast');
    otherFaqBox.find('.faq_control i').addClass('fa-caret-down').removeClass('fa-caret-up');

    // toggle current faq box
    currFaqBox.find('.faq_body').slideToggle('fast');
    currFaqBox.find('.faq_control i').toggleClass('fa-caret-down fa-caret-up');
  });
});
.width_container:after,
.width_container_small:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

.width_container,
.width_container_small { display: block; }
/* start commented backslash hack \*/
* html .width_container,
* html .width_container_small { height: 1%; }
.width_container,
.width_container_small { display: block; }
/* close commented backslash hack */

/********** FAQ Page **********/

.faq_page {
  margin: 80px 0 80px;
}

.faq_box {
  -webkit-box-shadow: 0px 0px 10px 0px rgba(35,31,32,1);
  -moz-box-shadow: 0px 0px 10px 0px rgba(35,31,32,1);
  box-shadow: 0px 0px 10px 0px rgba(35,31,32,1);
  -ms-box-shadow: 0px 0px 10px 0px rgba(35,31,32,1);
  -o-box-shadow: 0px 0px 10px 0px rgba(35,31,32,1);

  margin-bottom: 40px;
}

.faq_header {
  background: #231f20;
  padding: 20px 0;
}

.faq_title {
  float: left;
  width: 95%;
}

.faq_title h2 {
  color: #fff;
  margin: 0;
  font-size: 22px;
  font-weight: 300;
  text-align: left;
  font-family: 'Open Sans', sans-serif;
  padding-left: 20px;
}

.faq_control {
  float: right;
  width: 5%;
}

.faq_control i {
  color: #fff;
  font-size: 40px;
  line-height: 40px;

}

.faq_body {
  background: #e8e8e8;
  padding: 20px;
  display: none;
}

.faq_active {
  display: block;
}

.faq_body p {
  margin: 0;
  font-size: 16px;
  line-height: 36px;
  letter-spacing: 2px;
  font-weight: 400;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class="faq_page">
    <div class="width_container_small">

        <div class="faq_box">
            <div class="faq_header">
                <div class="width_container">
                    <div class="faq_title">
                        <h2>This is a Frequently Aksed Question?</h2>
                    </div>
                    <div class="faq_control">
                        <i class="fa fa-caret-up" aria-hidden="true"></i>
                    </div>
                </div>
            </div>
            <div class="faq_body faq_active">
                <p>orem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mollis vitae sapien quis vestibulum. Integer mollis erat et enim placerat ullamcorper. Vivamus malesuada blandit justo, ut scelerisque nibh tempor vel. Cras mattis, erat eget facilisis suscipit, est magna elementum ex, quis facilisis erat tortor et metus. Vestibulum ante This is a</p>
            </div>
        </div>

        <div class="faq_box">
            <div class="faq_header">
                <div class="width_container">
                    <div class="faq_title">
                        <h2>This is a Frequently Aksed Question?</h2>
                    </div>
                    <div class="faq_control">
                        <i class="fa fa-caret-down" aria-hidden="true"></i>

                    </div>
                </div>
            </div>
            <div class="faq_body">
                <p>orem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mollis vitae sapien quis vestibulum. Integer mollis erat et enim placerat ullamcorper. Vivamus malesuada blandit justo, ut scelerisque nibh tempor vel. Cras mattis, erat eget facilisis suscipit, est magna elementum ex, quis facilisis erat tortor et metus. Vestibulum ante This is a</p>
            </div>
        </div>

        <div class="faq_box">
            <div class="faq_header">
                <div class="width_container">
                    <div class="faq_title">
                        <h2>This is a Frequently Aksed Question?</h2>
                    </div>
                    <div class="faq_control">
                        <i class="fa fa-caret-down" aria-hidden="true"></i>
                    </div>
                </div>
            </div>
            <div class="faq_body">
                <p>orem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mollis vitae sapien quis vestibulum. Integer mollis erat et enim placerat ullamcorper. Vivamus malesuada blandit justo, ut scelerisque nibh tempor vel. Cras mattis, erat eget facilisis suscipit, est magna elementum ex, quis facilisis erat tortor et metus. Vestibulum ante This is a</p>
            </div>
        </div>

    </div>
</section>
Hide result
+1
source

Source: https://habr.com/ru/post/1652629/

More articles:


All Articles