Angular JS: Automatically toggle the visibility of a div on a panel click event

There is a row, panel, and a closed div on load.

Clicking on the panel should make the div appear while making the row and panel disappear. Clicking on X should make the panel and row appear again.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="row">
  <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12 margin_text">
    <div class=" font-thin pull-left margin_top_4 padding_left_20">
      <span class="font_size_17 ">Discussion Forum</span>
    </div>
  </div>
</div>


<div class="panel panel-default">
  <div class="panel-header" ng-click="open_div=true">Click me</div>
</div>


<div ng-show="open_div">
  Div Opened <span>X</span>
</div>

Clicking on Click me will open the div and make the discussion forum row and panel disappear. Clicking on X will close the div and make the panel and row reappear.

javascripthtmlcssangularjs

Answer №1

Utilize the open_div tag for concealment purposes.

Additionally, you have the option to employ the ng-hide directive for hiding elements. 

<html ng-app>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>
  <div ng-show="!open_div" class="row">
    <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12 margin_text">
      <div class=" font-thin pull-left margin_top_4 padding_left_20">
        <span class="font_size_17 ">Discussion Forum</span>
      </div>
    </div>
  </div>


  <div ng-show="!open_div" class="panel panel-default">
    <div class="panel-header" ng-click="open_div=true">Click me</div>
  </div>


  <div ng-show="open_div">
    Div Opened <span ng-click="open_div=false">X</span>
  </div>
</body>

Answer №2

This solution may not be perfect, but it definitely provides some help.

<div class="panel panel-default">
    <div class="panel-header" ng-click="open_div= true" ng-init="open_div=false">Click here</div>
</div>

<div ng-show="open_div">The Div is now Open <span ng-click="open_div= false">Close</span>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with unit testing a ViewportRuler in Angular 2 Material Library

I am currently working on an Angular2 component that includes a tab control from @angular/material. During testing of my component (refer to the simplified code below), I encountered the following error: Error: Error in ./MdTabHeader class MdTabHeader - ...

javascriptangulartypescriptkarma-jasmine

Hiding the title property while displaying a JQuery tooltip

I have implemented a simple JQuery solution for creating hovering tooltips using text from elements' title attribute. While it is functioning adequately, I am looking to prevent the default browser behavior associated with the title attribute from occ ...

javascriptjqueryasp.net

Leveraging the combination of <Form>, jQuery, Sequelize, and SQL for authentication and navigation tasks

My objective is to extract the values from the IDs #username-l and #pwd-l in an HTML form upon the user clicking the submit button. I aim to compare these values with those stored in a SQL database, and if they match exactly, redirect the user to a specifi ...

javascriptjqueryhtmlsqlsequelize.js

Populate the dropdown menu with data from a JSON file

Recently, I created a custom JSON file and wanted to populate a select>option using this data. However, I encountered an error message saying: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///C:/.../p ...

javascripthtmljqueryjsonajax

Executing JavaScript in HttpClient or HtmlUnitHow to trigger javascript in HttpClient or HtmlUnit

Currently, I am using the HttpClient POST method to perform a specific action on a website. This involves using Javascript for an ajax connection which generates a unique requestID in the form of var reqID = Math.floor(Math.random()*1000001);. I need to ac ...

javajavascriptajaxhttpclienthtmlunit

Strategies for creating a dynamic progress bar using jQuery and JavaScript

I'm currently working on a project that involves increasing a percentage number while filling up the background color inside it based on the percentage value. The current setup is functional in terms of animating the background, but I need it to dynam ...

javascripthtmlcssjquery-animate

Animating elements with CSS keyframes for scaling and translating transformations

I'm having trouble manipulating the size and position of an absolutely positioned div. Even after scaling, the div doesn't end up where I intended it to be in my keyframe animation. I suspect that this issue is caused by the fixed coordinates of ...

htmlcssanimationcss-animations

Dropdown submenu display issue with multiple selections

I've been working on a multi-level dropdown menu. It seems like there's a dropdown menu inside another dropdown menu. However, when I click on the inner dropdown menu, it doesn't open to the right as expected; instead, it opens below the men ...

htmlcssdrop-down-menutwitter-bootstrap-3

Datagrid in AngularJS does not update filters upon refresh

Currently, I am attempting to implement name filtering with Angular JS using the following library: https://github.com/angular-data-grid/angular-data-grid.github.io. However, an issue arises when searching as the results do not refresh immediately; only up ...

javascriptangularjsdatagrid

Obtain the content of every cell in a constantly updating table

I have created a dynamic table as shown below: <table id="sort" class="table"> <thead> <tr> <th>Column Name from DB*</th> <th>Record Le ...

javascriptc#jquery

When using angular's ngHide directive on a button, it will still occupy space in the

At the bottom of this HTML file, there are 3 buttons displayed. The first image illustrates the layout of the 3 buttons. The second image demonstrates what happens when the middle button in the footer is commented out. The third image shows the situat ...

htmlcssangularjs

What is the best way to remove empty elements from an Array?

Having an issue with my API post request. If no values are entered in the pricing form fields, I want to send an empty array. I attempted to use the filter method to achieve this but it still sends an array with an empty object (i.e. [{}]) when making the ...

javascriptarraysjsonreactjspost

Looking to discover how to optimize a website for various Android resolutions?

Currently, I am working on designing websites specifically for Android phones. However, I have encountered a major challenge due to the wide range of screen resolutions found on these devices. Some phones boast a height of 800px while others are limited to ...

androidhtmlcssandroid-layoutmobile

Is it not possible to use GLOB with JSHint on Windows operating systems?

Currently, I am experimenting with using NPM as a build tool (). My experience with NPM is limited, and at the moment I only have JSHint and Mocha installed. Attached is my package.json file. However, when I try to run "npm run lint" in the Windows 7 comma ...

javascriptnode.jsnpmjshintbuild-tools

Guide on implementing Vuetify Component Slot Function

Can someone help me figure out how to implement the v-alert dismissible component with additional functionality when the close button is clicked? According to the documentation, there is a function called toggle in the close slot that allows you to "Toggle ...

javascriptvue.jsvuetify.js

Tips for arranging headers next to each other on a restaurant menu

I'm currently working on a website for a local restaurant, my very first project of this kind. As I draft the menu section, I'm struggling with displaying Starters and Main Courses side by side on the screen. Additionally, the layout falls apart ...

htmlcssflexboxbootstrap-4

JSFiddle Functioning Properly, But Documents Are Not Loading

My JSFiddle is functioning properly, but the files on my computer aren't. It seems like there might be an issue with how they are linking up or something that I may have overlooked. I've checked the console for errors, but nothing is popping up. ...

javascriptjqueryhtmlcss

Could this be a problem with synchronization? Utilizing Google Translate to link-translate terms

Trying to create a script that will show how a word changes through multiple translations using Google Translate, but struggling with Javascript. The problem I'm facing is hard to pinpoint: function initialize() { var word = "Hello"; var engl ...

javascriptasynchronousconcurrencygoogle-translate

Passing arrow functions for input validation rules to the Stancil component in Vue

I am attempting to implement an arrow function as input rules, similar to the setup in Vuetify at https://vuetifyjs.com/en/api/v-input/#rules. My approach involves passing rules within an array using the following code: <body> <div id="ap ...

javascriptvue.jsvuejs2stenciljsvue-props

Engaging with tasks like incorporating fresh elements into JavaScript code

I am looking to implement an event listener that triggers whenever a new element is added to the document or any of its children. Can someone recommend a method for accomplishing this? ...

javascriptjqueryhtmleventsevent-handling