Sow Hide HTML DIV on Icon Click using jQuery

RichardS...

SOLVED CLOSED ACTIVE ANSWERED
User: RichardSa
Posted: on Dec 12, 2022 10:15 PM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 4646
Sample Code: Download

I have a situation where I click on button to show and hide Div.

But what I want to achieve is that I want to have only icon to click. I don’t want to have a button. I want to click on the icon to show and hide div.

Then when one Div is click, others will hide. Example, if one div is open and I click on another div to open, and then the first div that was open should be closed. Also if i decide to click on icon for another div to open, then the second div will be closed too, while the third div will be open. If I go back and click the second div to pen, then the third div will be closed.

Although I am presenting only one div here, but it is how my other divs look.

HTML

<div class="FAQs">
    <i class="fas fa-check-square" aria-hidden="true"></i>
    <label>
        General Question
    </label>
    <br />
    <label>How to show Div</label>
   <button onclick="javascript:return ShowDivonClick();"><i class="fa solid fa-sort-down" aria-hidden="true"></i></button>
    <div id="divcontrol">
        Show and Hide Div on Button Click in Asp.Net
    </div>
</div>

Javascript

<script type="text/javascript">
    function ShowDivonClick() {
        $('#divcontrol').toggle("slow");
        return false;
    }
</script>

PrinceG

0 2

Reply
ANSWER
User: PrinceG
Replied: on Dec 13, 2022 12:25 AM
Modified: on Dec 13, 2022 06:19 AM
Report

Hi RichardSa,

Please refer below sample.

Code

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #dvAccordion h4 {
            cursor: pointer;
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.content').hide();
            $('#dvAccordion').find('.accordion').click(function () {
                var hasOpened = $(this).hasClass("open")
                $('h4').removeClass("open").addClass("closed");
                if (!hasOpened) {
                    $(this).removeClass("closed").addClass("open");
                }
                $(this).next().slideToggle('fast');
                $(".content").not($(this).next()).slideUp('fast');
            });
        });
    </script>
</head>
<body>
    <div id="dvAccordion">
        <h4 class="accordion closed">
            <i class="fa solid fa-sort-down" aria-hidden="true"></i>Div1
        </h4>
        <div class="content default">
            <p>Hide and Show Div1</p>
        </div>
        <h4 class="accordion closed">
            <i class="fa solid fa-sort-down" aria-hidden="true"></i>Div2
        </h4>
        <div class="content">
            <p>Hide and Show Div2</p>
        </div>
        <h4 class="accordion closed">
            <i class="fa solid fa-sort-down" aria-hidden="true"></i>Div3
        </h4>
        <div class="content">
            <p>Hide and Show Div3</p>
        </div>
    </div>
</body>
</html>

Demo

Sow Hide HTML DIV on Icon Click using jQuery

Company

Explore

Follow us

Contact Us