Showing posts with label jQuery. Show all posts
Showing posts with label jQuery. Show all posts

Tuesday, July 2, 2024

Easy Accordion with Plus/Minus Icons

 <!doctype HTML>

<html>

<head>

<meta content="text/html; charset=UTF-8" />

<title>Web Code Addict Accordion</title>

</head>

<body>

<div class="accordion_container">

    <div class="accordion_heading">First Accordian Head<span class="plusminus">+</span>


    </div>

    <div class="accordion_content" style="display: none;">

        <p>First Accordian Body, it will have description</p>

    </div>

    <div class="accordion_heading">Second Accordian Head<span class="plusminus">+</span>


    </div>

    <div class="accordion_content" style="display: none;">

        <p>Second Accordian Body, it will have description</p>

    </div>

    <div class="accordion_heading">Third Accordian Head<span class="plusminus">+</span>


    </div>

    <div class="accordion_content" style="display: none;">

        <p>Third Accordian Body, it will have description</p>

    </div>

</div>

</body>

</html>


/////////////////////////////////CSS///////////////////////////////////////////////////

.accordion_container {

    width: 500px;

}

.accordion_heading {

    background-color:skyblue;

    color: white;

    cursor: pointer;

    font-family: arial;

    font-size: 14px;

    margin: 0 0 1px 0;

    padding: 7px 11px;

    font-weight: bold;

}

.accordion_content {

    background: lightgray;

}

.accordion_content p {

    padding: 18px 5px;

    margin: 0px;

}

.plusminus {

    float:right;

}

/////////////////////////////////////////////Script/////////////////////////////

$(document).ready(function () {

  $(".accordion_heading").click(function () {

        if ($('.accordion_content').is(':visible')) {

            $(".accordion_content").slideUp(300);

            $(".plusminus").text('+');

        }

        if ($(this).next(".accordion_content").is(':visible')) {

            $(this).next(".accordion_content").slideUp(300);

            $(this).children(".plusminus").text('+');

        } else {

            $(this).next(".accordion_content").slideDown(300);

            $(this).children(".plusminus").text('-');

        }

    });

});

- No comments:
Labels: , , ,

Monday, December 25, 2023

Code to Load more isotope Divis Using Jquery Ajax

 <script>

$(document).ready(function() {


$('.team-filters ul li a').click(function() {

$('.team-filters ul li a').removeClass('active');

$(this).addClass('active');


});


// var selector = $(this).attr('data-filter');

var $container = $('.isotope').isotope({

filter: $container,

itemSelector: '.element-item',

});


$('#filters').on('click', 'a', function() {

var filterValue = $(this).attr('data-filter');

// use filterFn if matches value

// filterValue = filterFns[filterValue] || filterValue;

$container.isotope({

filter: filterValue

});

});


$container.imagesLoaded(function() {

$container.isotope('layout');

});


// return false;



var initShow = 6;

var counter = initShow; 

var iso = $container.data('isotope'); 


loadMore(initShow); //execute function onload


function loadMore(toShow) {

$container.find(".hidden").removeClass("hidden");


var hiddenElems = iso.filteredItems.slice(toShow, iso.filteredItems.length).map(function(item) {

return item.element;

});

$(hiddenElems).addClass('hidden');

$container.isotope('layout');


//when no more to load, hide show more button

if (hiddenElems.length == 0) {

jQuery("#load-more").hide();

} else {

jQuery("#load-more").show();

};

}


//append load more button

// $container.after('<button id="load-more"> Load More</button>');


//when load more button clicked

$("#load-more").click(function(event) {

event.preventDefault();

if ($('#filters').data('clicked')) {

//when filter button clicked, set initial value for counter

counter = initShow;

$('#filters').data('clicked', false);

} else {

counter = counter;

};

counter = counter + initShow;

loadMore(counter);

});


//when filter button clicked

$("#filters").click(function() {

            // alert("sd;lk");

$(this).data('clicked', true);

loadMore(initShow);

});



});

</script>

- No comments:
Labels: , , ,

Sunday, April 23, 2023

What is jQuery?

 jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.


Basic syntax is: $(selector).action()
  • A $ sign to define/access jQuery
  • A (selector) to "query (or find)" HTML elements
  • A jQuery action() to be performed on the element(s)
Examples:
$(this).hide() - hides the current element.
$("p").hide() - hides all <p> elements.
$(".test").hide() - hides all elements with class="test".
$("#test").hide() - hides the element with id="test".


EXAMPLE: 

$(document).ready(function(){

   // jQuery methods go here...

});

- No comments:
Labels: ,

Friday, March 31, 2023

Item counter in owl Carousel

<script>
jQuery(document).ready(function() {
    var carousel = jQuery(".service-slider");
    jQuery(".service-slider").owlCarousel({
        items: 3,
        loop: true,
        margin: 1,
        autoplay:true,
        autoplayTimeout:2000,
        autoplayHoverPause:true,
        center: true,
        onInitialized  : counter, 
        onTranslated : counter,
        responsive: {
            0: {
                items: 1,
                nav: true,
                dots: false,
            },
            575: {
                items: 2,
                nav: true,
                dots: false,
            },
            767: {
                items: 2,
                nav: true,
                dots: false,
            },
            980: {
                items: 2,
                nav: true,
                dots: false,
            },
            1000: {
                items: 2,
                nav: true,
                dots: false,
            },
            1280: {
                items: 3,
                nav: true,
                dots: false,
            }
        },

    });
    function counter(e) {
   var ele   = e.target;        
    var items     = e.item.count;    
    var item      = e.item.index + 1;  
  if(item > items) {
    item = item - items
  }
        if(items<10){
  jQuery('#number-count').html("<span class=''>0"+item+"</span><span class='divider'> |</span><span class='all-items'> 0"+items+"</span>");
        } else{
       jQuery('#number-count').html("<span class=''>0"+item+"</span><span class='divider'> |</span><span class='all-items'>"+items+"</span>");     
        }
}
});
  </script>
- No comments:
Labels: , , , ,

Wednesday, March 29, 2023

jQuery to smoothly scroll page

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
  
  $("a").on('click', function(event) {
     
if (this.hash !== "") {
    
 event.preventDefault();
     
var hash = this.hash;
     
$('html, body').animate({
       
 scrollTop: $(hash).offset().top
      
}, 800, function(){
       
window.location.hash = hash;
      
});
   
 }
  
});

});
</script>
- No comments:
Labels: , ,
Subscribe to: Posts (Atom)

For Professional website contact WEB CODE ADDICT

View this post on Instagram A post shared by WebCodeAddict (@webcodeaddicted)