JQuery Collapse

Developer
Mohammed Fawzy
Size
4,096 Kb
Views
8,096
  1. JQuery Collapse Previews
  2. JQuery Collapse HTML Codes
  3. JQuery Collapse CSS Codes
  4. JQuery Collapse JS Codes

How do I make an jquery collapse?

What is a jquery collapse? How do you make a jquery collapse? This script and codes were developed by Mohammed Fawzy on 26 January 2023, Thursday.

JQuery Collapse Previews
IQ Test

JQuery Collapse - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>JQuery Collapse </title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section class="course-sec"> <div class="container"> <div class="row"> <div class="col-md-4"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRho0YsJRYbG0W0zKM8pfl6vgq3F7H8Zua0juDUA0jIu4lmehXN" alt="what we do" class="img-responsive center-block"> <div class="course-price"> <h3 class="tex-center">سعر الكورس</h3> <p class="old-price">300 ريال</p> <p class="new-price">200 ريال</p> </div> </div> <!-- end column --> <div class="col-md-8"> <h2 class="h2-before text-center">مضمون الدورة</h2> <dl> <dt> دورة تدريبية </dt> <dd>هناك حقيقة مثبتة منذ زمن طويل وهي أن المحتوى المقروء لصفحة ما سيلهي القارئ عن التركيز على الشكل الخارجي للنص أو شكل توضع الفقرات في الصفحة التي يقرأها. ولذلك يتم استخدام طريقة لوريم إيبسوم </dd> <dt> الدعم الفني </dt> <dd>هناك حقيقة مثبتة منذ زمن طويل وهي أن المحتوى المقروء لصفحة ما سيلهي القارئ عن التركيز على الشكل الخارجي للنص أو شكل توضع الفقرات في الصفحة التي يقرأها. ولذلك يتم استخدام طريقة لوريم إيبسوم </dd> <dt> موقع تجاري احترافي </dt> <dd>هناك حقيقة مثبتة منذ زمن طويل وهي أن المحتوى المقروء لصفحة ما سيلهي القارئ عن التركيز على الشكل الخارجي للنص أو شكل توضع الفقرات في الصفحة التي يقرأها. ولذلك يتم استخدام طريقة لوريم إيبسوم </dd> <dt> محررين وكتاب ومشرفين </dt> <dd>هناك حقيقة مثبتة منذ زمن طويل وهي أن المحتوى المقروء لصفحة ما سيلهي القارئ عن التركيز على الشكل الخارجي للنص أو شكل توضع الفقرات في الصفحة التي يقرأها. ولذلك يتم استخدام طريقة لوريم إيبسوم </dd> <dt> بالاضافة الي </dt> <dd>هناك حقيقة مثبتة منذ زمن طويل وهي أن المحتوى المقروء لصفحة ما سيلهي القارئ عن التركيز على الشكل الخارجي للنص أو شكل توضع الفقرات في الصفحة التي يقرأها. ولذلك يتم استخدام طريقة لوريم إيبسوم </dd> <dt> هدايا مجانية </dt> <dd>هناك حقيقة مثبتة منذ زمن طويل وهي أن المحتوى المقروء لصفحة ما سيلهي القارئ عن التركيز على الشكل الخارجي للنص أو شكل توضع الفقرات في الصفحة التي يقرأها. ولذلك يتم استخدام طريقة لوريم إيبسوم </dd> </dl> </div> <!-- end column --> </div> <!-- end row -->
</div> <!-- end container -->
</section> <!-- endcourse section --> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

JQuery Collapse - Script Codes CSS Codes

.course-sec { background-color: #f3f3f3; padding-top: 20px; padding-bottom: 150px;
}
.course-sec img { width: 370px; height: 500px; max-width: 100%; min-width: 100%; position: relative;
}
.course-sec h2 { color: #002436; font-size: 28px; margin-bottom: 50px; font-weight: 700; font-family: 'Conv_bein-normal';
}
.course-sec h2:before { border-color: #16b7e3;
}
.course-price { position: absolute; top: 10%; left: 10%;
}
.course-price h3 { background-color: #16b7e3; width: 218px; height: 60px; color: #fff; text-align: center; line-height: 60px; transform: skew(2deg, -9deg); -ms-transform: skew(2deg, -9deg); -moz-transform: skew(2deg, -9deg); -webkit-transform: skew(2deg, -9deg);
}
.course-price p { font-size: 40px; color: #fff;
}
.course-price .old-price { text-decoration: line-through;
}
dl dt { margin-bottom: 30px; font-size: 25px; text-align: right; color: #3b4e5a; font-family: 'Conv_bein-normal'; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; transition: all 0.5s ease;
}
dl dt:before { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-block; margin-left: 20px; background-color: #e31650; padding: 4px 5px; color: #fff; content: "\f067"; float: right; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; transition: all 0.5s ease;
}
dl:hover { cursor: pointer;
}
dd { color: #3b4e5a; margin-right: 5%; margin-bottom: 30px; font-size: 23px; font-family: 'Conv_bein-normal'; text-align: right;
}
.dt-open:before { font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-block; content: "\f068"; padding: 0 5px;
}

JQuery Collapse - Script Codes JS Codes


$(document).ready(function(){ $("dd").hide(); $("dt").click( function (){ var next = $(this).next() // if has class "open"> hide dd if ( $(this).hasClass("dt-open") ) { $(next).slideUp(500).prev().removeClass("dt-open"); } // end if else { // if has not class "open" > show the dd and hide other dd next.slideDown(500).prev().addClass("dt-open").end().siblings("dd").slideUp(500).prev().removeClass("dt-open"); } // end else } // end function ); // end click
});
// the " td-open " class add an icon "-" from fontawesome
JQuery Collapse - Script Codes
JQuery Collapse - Script Codes
Home Page Home
Developer Mohammed Fawzy
Username mohammed-fawzy
Uploaded January 26, 2023
Rating 3
Size 4,096 Kb
Views 8,096
Do you need developer help for JQuery Collapse?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mohammed Fawzy (mohammed-fawzy) Script Codes
Name
Dropdown menu -arabic
Like button jQuery
Scroll to Top
Tab
Search lable in search input
Tool Box
Place holder
Slider
Before page loading
Update text with react
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!