Dev {Tricks}

  • Home
  • WordPress
  • OJS
  • Oxwall
  • Server and Hosting
You are here: Home / Archives for jQuery

November 23, 2021 by dev

Accordion Toggle

Toggle up and down arrows in a simple accordion widget

HTML Markup

<div class="accordion">
<div class="accordion-head">
<h4 style="font-size:40px;margin:6px 0 10px 0">⬇</h4>

</div>
<div class="accordion-body">
<p> <span><strong>أرسل بحثك للتحكيم معنا</strong></span> <span>“لا تضيع فرصة النشر في احد افضل المجلات العلمية العربية”</span> <button><a href="https://ajsrp.com/send/">أرسل بحثك هنا</a></button></p> 
</div>

</div>

CSS

/*Accordian*/
.accordion {
width: 100%;
position:fixed;
right:0px;
top:0;
z-index:9999;
}
.accordion .accordion-head {
color: #fff;
background-color: #EB5B31;
position: relative;
padding: 0 4px;
cursor: pointer;
border-top: 0;
float:right;
margin-right:20px;
border-left:5px solid #fff;
border-right:5px solid #fff;
border-bottom:5px solid #fff;
border-radius:0 0 10px 10px; 
}
.accordion .accordion-head * {
cursor: pointer;
}
.accordion .accordion-head:hover {
opacity: 1;
}
.accordion .accordion-head {
opacity: 0.85;
transition:0.5s;


}
.accordion .accordion-body {
padding: 2px 20px;
height: auto;
display: block;
background: #EB5B31;
color:#ffffff;
text-align:center;
}
.accordion-body button {
margin: 0;
padding: 6px 10px;
background: #111;
border: 0;
border-radius: 6px;
}
.accordion-body button a {
background: #111;
color: #fff;
}
.accordion-body p {
margin: 6px;
}

Javascript (jQuery)

//Accordian
$('.accordion').each(function () {
var $accordian = $(this);
$accordian.find('.accordion-head').on('click', function () {
$accordian.find('.accordion-body').slideUp();
if (!$(this).next().is(':visible')) {
$(this).next().slideDown();
$('h4',this).text("⬆").css("font-size","40px");
}else{
$('h4',this).text("⬇").css("font-size","40px");
}
});
});

 

Filed Under: Customization, How to, jQuery, jQuery Plugins Tagged With: accordion, data toggle, toggle, up down

February 20, 2021 by dev

How to generate Google Maps API Key

Google requires Maps API Key in order to use google Maps. Follow the step-by-step instructions to create a Google Maps API key:

1. Creating a new project at https://console.developers.google.com/
2. Enable the Google Map APIs by entering “ENABLE APIS AND SERVICES” of the project.

  • Search for “Maps JavaScript API”. Then click on it.
  • Enable Maps for your website.

NOTE If you are HUB subscriber, you need to enable more Maps Static API.

Google Maps JavaScript API (for Solidres Options – Component – Google Map API Key)
Google Maps Static API (for Solidres Options – Hub – Google Static Map API Key)

3. Create a new API key by creating New Credentials

Filed Under: jQuery, Miscellaneous

August 27, 2020 by dev

jQuery Add and Remove CSS Classes

jQuery Add and Remove CSS Classes

switch (window.location.pathname) {
  case '/index.php/IJMA/article/view/371':
  $('.authors').addClass('supplement');
  $('.abstract').removeClass('asupplement');
  break;
}

 

 

Filed Under: jQuery

  • Upwork
  • Freelancer
  • Fiverr
  • Guru
  • PPH

Recent Posts

  • MariaDB Upgrade to the new version | Plesk – CentOS 7 / RHEL 7
  • Google Workspace MX record values
  • Could not open input file
  • How to remove journal path for single journal OJS website.
  • How to Clean the YUM Cache in CentOS
  • How to run php file through command line? How do I enable PHP?
  • How to disable functions using the PHP disable_functions directive in php ini
  • Error 503 Backend fetch failed
  • Unblock iRedMail IP
  • Most Read Articles
  • Import export database | Linux
  • How to reset MySQL root password | CWP
  • MariaDB Upgrade to the new version | CWP
  • Install Optimize with optimize.js (sync)
  • Journey to Laravel & Vue – December to February 2022/2023
  • Elementor
  • Java Errors
  • How to Install Zip/Unzip
  • Redirect www to non-www and vice versa
  • How to change Time Zone in Debian 11 / Debian 10

Categories

  • Affiliate Marketing (1)
  • Customization (3)
    • CSS (1)
  • Email Solutions (20)
    • FrontApp (1)
    • Google Spreadsheet (2)
    • Microsoft Outlook (1)
    • PHP Email Form (3)
    • PolyMail (1)
    • Recaptcha (1)
    • Roundcube (3)
    • Thunderbird (2)
    • WebMail (4)
  • Games (1)
  • How to (75)
  • Joomla (6)
    • Akeeba (1)
    • Fix & Tricks (3)
  • jQuery (3)
  • jQuery Plugins (4)
    • BX Slider (1)
    • Slick (1)
  • Laravel (1)
  • Marketplace (5)
  • Miscellaneous (26)
  • OJS (52)
    • Help (35)
    • Installation (9)
      • Issues (5)
    • Plugins (7)
    • Theme (6)
      • Templates (6)
        • Frontend (5)
        • legacy (1)
    • Theme Customization (9)
    • Theme Development (13)
    • TPL CSS JS (2)
    • Upgrade (11)
  • Oxwall (3)
  • Payment Methods (1)
    • Paypal (1)
  • PC Tips and Tricks (12)
    • MS Office (1)
      • PowerPoint (1)
    • Windows (3)
  • PHP Parse error (2)
  • phpBB (1)
  • Server and Hosting (174)
    • Billing and Management (10)
      • Blesta (5)
      • Boxbilling (2)
      • WHMCS (5)
    • Debian (5)
    • Email (9)
      • Postfix (3)
    • Error and Fix (16)
    • FTP (2)
    • Mail Server Solusion (5)
      • iRedMain (4)
    • MySQL (9)
    • Providers (54)
      • AWS (23)
      • Bluehost (23)
      • Cloudcone (12)
      • Contabo (26)
      • Digitalocean (54)
      • HostGator (22)
      • VPSDime (24)
    • Security (18)
      • SSH (6)
    • VPS Management (60)
    • Web Control Panel (125)
      • CentOS Web Panel (36)
      • cPanel (24)
      • DirectAdmin (89)
        • Find & fix (38)
      • ISPConfig (11)
      • Plesk (20)
      • Webmin (19)
        • Usermin (2)
        • Virtualmin (11)
      • WHM (13)
  • Uncategorized (14)
  • Wordpress (86)
    • Elementor (2)
    • Find and Fix (9)
    • Functions (5)
    • Genesis (9)
    • Glossary (1)
    • How to (20)
    • Neuron TD (15)
      • Console Error (1)
      • functions (5)
        • register_post_type (1)
        • register_sidebar (1)
        • theme_files (1)
        • theme_supports (1)
      • Image Directory (1)
      • Menu (2)
      • Query (4)
    • Plugins (12)
      • Contact Form 7 (5)
      • Duplicator (1)
      • Essential Grid (2)
    • Softaculous (3)
    • Speed and Security (4)
    • Stock Theme Development (6)
      • Header Footer (1)
      • PHP (1)
      • VC (1)
    • Theme Development (2)
      • Issues (1)
      • Menu (1)
    • Timer Theme Development (3)
    • Update (2)
    • Woocommerce (2)
    • WP Basic Guideline (8)

Important DEV links

  • Premium Themes
    • Themeforest
    • Envato Market
  • Built With (What Theme is That?)
    • What WP theme is that
    • Joomla Template Detector
    • Drupal Template Detector
    • Prestashop Template Detector
    • Shopify Theme Detector
    • Squarespace Template Detector
    • OpenCart Detector
    • WordPress.com Theme Detector
  • Domain/IP history checker
    • Who IS request
    • Hosting Info
  • Check DNS Propagation
    • DNS Checker
    • intoDNS
  • What is my IP
    • What is My IP Address
    • What is My IP
    • IP location
    • What is My IP
    • Porkbun
  • SEO Tools
    • Visitor Traffic
    • Broken Link
    • Website Speed Test
      • SEMrush
      • GTmetrix
      • Pingdom
      • PageSpeed Insights
      • DebugBear
      • keyCDN
  • Photo Image
    • Remove Background 50 Free Preview Image 375 × 666 per month
  • Domain Registrars
    • 123-Reg
    • Porkbun
    • Freenom
    • Namecheap NEWCOM598
  • Hosting Providers
    • Bluehost
    • Hostgator
    • Inmotion
  • Hosting Control Panel
    • CWPpro (FREE)
    • DirectAdmin (Trial 60 Days, One account $2/month)
    • ISPConfig (Free)
  • Webmaster Tools
    • Google
    • Bing
    • Yandex
  • Miscellaneous
    • Time Calculator

 

  • Home
  • WordPress
  • OJS
  • Oxwall
  • Server and Hosting

Copyright © 2023 · Executive Pro Theme on Genesis Framework · WordPress · Log in