Solved

How to create Show and Hide button, when we click on Show it will open dialog box and when we click on close it should be close

Forum|Forum|1 year ago
April 7, 2024
5 replies
1111 views

Can anyone help me ?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by Raja_Reddy

Hi @tejuuu123
you can create a Show and Hide button with a dialog box using the Coral UI components.

package com.example.core.servlets;

import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.api.SlingHttpServletResponse;
import org.apache.sling.api.servlets.SlingAllMethodsServlet;
import org.osgi.service.component.annotations.Component;

import javax.servlet.Servlet;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.PrintWriter;

@Component(service = Servlet.class, property = {
        "sling.servlet.methods=GET",
        "sling.servlet.paths=/bin/showhide"
})
public class ShowHideServlet extends SlingAllMethodsServlet {

    @Override
    protected void doGet(SlingHttpServletRequest request, SlingHttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html");
        PrintWriter out = response.getWriter();

        out.println("<html>");
        out.println("<head>");
        out.println("<title>Show and Hide Example</title>");
        out.println("<style>");
        out.println(".dialog-box {");
        out.println("  position: fixed;");
        out.println("  top: 50%;");
        out.println("  left: 50%;");
        out.println("  transform: translate(-50%, -50%);");
        out.println("  background-color: `#fff`;");
        out.println("  padding: 20px;");
        out.println("  border: 1px solid `#ccc`;");
        out.println("  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);");
        out.println("}");
        out.println("</style>");
        out.println("</head>");
        out.println("<body>");
        out.println("<button id=\"show-btn\">Show</button>");
        out.println("<div id=\"dialog-box\" style=\"display: none;\" class=\"dialog-box\">");
        out.println("<p>This is the dialog box content.</p>");
        out.println("<button id=\"close-btn\">Close</button>");
        out.println("</div>");
        out.println("<script src=\"/etc/clientlibs/myproject/clientlib/js/jquery.min.js\"></script>");
        out.println("<script>");
        out.println("$(document).ready(function() {");
        out.println("  $('#show-btn').click(function() {");
        out.println("    $('#dialog-box').show();");
        out.println("  });");
        out.println("  $('#close-btn').click(function() {");
        out.println("    $('#dialog-box').hide();");
        out.println("  });");
        out.println("});");
        out.println("</script>");
        out.println("</body>");
        out.println("</html>");
    }
}

In this example, we create a servlet called ShowHideServlet that handles the GET request to /bin/showhide. Inside the doGet method, we generate the HTML markup for the Show and Hide button and the dialog box.

The dialog box is initially hidden using the display: none; CSS property. When the Show button is clicked, we use jQuery to show the dialog box by calling $('#dialog-box').show();. Similarly, when the Close button is clicked, we use jQuery to hide the dialog box by calling $('#dialog-box').hide();.

Make sure to include the jQuery library in your project by adding the following client library category to your clientlib.config.js file:

myproject.clientlib.js.categories=jquery

client library in your component's HTL file:

<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientLib.js @ categories='myproject.clientlib.js'}"></sly>

Raja_Reddy

Accepted solution

Community Advisor

Hi @tejuuu123
you can create a Show and Hide button with a dialog box using the Coral UI components.

package com.example.core.servlets;

import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.api.SlingHttpServletResponse;
import org.apache.sling.api.servlets.SlingAllMethodsServlet;
import org.osgi.service.component.annotations.Component;

import javax.servlet.Servlet;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.PrintWriter;

@Component(service = Servlet.class, property = {
        "sling.servlet.methods=GET",
        "sling.servlet.paths=/bin/showhide"
})
public class ShowHideServlet extends SlingAllMethodsServlet {

    @Override
    protected void doGet(SlingHttpServletRequest request, SlingHttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html");
        PrintWriter out = response.getWriter();

        out.println("<html>");
        out.println("<head>");
        out.println("<title>Show and Hide Example</title>");
        out.println("<style>");
        out.println(".dialog-box {");
        out.println("  position: fixed;");
        out.println("  top: 50%;");
        out.println("  left: 50%;");
        out.println("  transform: translate(-50%, -50%);");
        out.println("  background-color: `#fff`;");
        out.println("  padding: 20px;");
        out.println("  border: 1px solid `#ccc`;");
        out.println("  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);");
        out.println("}");
        out.println("</style>");
        out.println("</head>");
        out.println("<body>");
        out.println("<button id=\"show-btn\">Show</button>");
        out.println("<div id=\"dialog-box\" style=\"display: none;\" class=\"dialog-box\">");
        out.println("<p>This is the dialog box content.</p>");
        out.println("<button id=\"close-btn\">Close</button>");
        out.println("</div>");
        out.println("<script src=\"/etc/clientlibs/myproject/clientlib/js/jquery.min.js\"></script>");
        out.println("<script>");
        out.println("$(document).ready(function() {");
        out.println("  $('#show-btn').click(function() {");
        out.println("    $('#dialog-box').show();");
        out.println("  });");
        out.println("  $('#close-btn').click(function() {");
        out.println("    $('#dialog-box').hide();");
        out.println("  });");
        out.println("});");
        out.println("</script>");
        out.println("</body>");
        out.println("</html>");
    }
}

In this example, we create a servlet called ShowHideServlet that handles the GET request to /bin/showhide. Inside the doGet method, we generate the HTML markup for the Show and Hide button and the dialog box.

The dialog box is initially hidden using the display: none; CSS property. When the Show button is clicked, we use jQuery to show the dialog box by calling $('#dialog-box').show();. Similarly, when the Close button is clicked, we use jQuery to hide the dialog box by calling $('#dialog-box').hide();.

Make sure to include the jQuery library in your project by adding the following client library category to your clientlib.config.js file:

myproject.clientlib.js.categories=jquery

client library in your component's HTL file:

<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientLib.js @ categories='myproject.clientlib.js'}"></sly>

arunpatidar

Community Advisor

Hi @tejuuu123
Please check https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

Arun Patidar

Shashi_Mulugu

Community Advisor

@tejuuu123 , Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community

BrianKasingli

Community Advisor and Adobe Champion

Strictly having a solution for the customer's we can use HTML, CSS, and Javascript to solve this problem.

Jsfiddle: https://jsfiddle.net/76Lxw5sq/

HTML

<button class="toggle">
  toggle
</button>
<div id="nav" class="hidden">
  element
</div>

CSS

.hidden {
  display: none;
}
div {
  margin-top: 10px;
}

JS

document.addEventListener("DOMContentLoaded", function e() {
  var n = function(e) {
    document.getElementById("nav").classList.toggle("hidden")
  };
  document.removeEventListener("DOMContentLoaded", e);
  var t = Array.prototype.slice.call(document.querySelectorAll(".toggle"), 0);
  t.length && t.forEach(function(e) {
    e.addEventListener("click", n)
  })
})

EstebanBustamante

Community Advisor and Adobe Champion

@tejuuu123 Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community

Esteban Bustamante

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded