85126

onClick with foreach css change jquery

Question:

I have a foreach loop in php with bootstrap collapse panel and I want to know if there is any option to change color of div.panel-heading on-click for a single title.

So when I click on first title of <a href="..."></a> only the first div.panel-heading turns into red background.

@foreach($aa as $msg) <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> Sender: <a href="/member-list/{{{$msg->username}}}">{{{$msg->username}}}</a> {{{ " title: ". " "}}} <a data-toggle="collapse" data-parent="#accordion" href="#collapse{{{$msg->msg_id}}} "> {{{$msg->title}}} </a> </h4> </div> <div id="collapse{{{$msg->msg_id}}}" class="panel-collapse collapse"> <div class="panel-body"> {{{$msg->msg}}} </div> </div> </div> @endforeach

Answer1:

Do something like this using jquery:

$('div.panel-heading a').click(function(){ $('div.panel-heading').css('background','transparent'); var ParentDiv = $(this).parent(); ParentDiv.css('background','red'); });

Answer2:

Check out this (used jquery lib ) <a href="http://jsfiddle.net/smartyatwork/zFxVL/" rel="nofollow">JSfiddle</a>

$('div.panel-heading').click(function(){ $('div.panel-heading').removeClass('bgcolor'); $(this).addClass('bgcolor'); });

Recommend

  • How to remove left and right margins from all wrapped rows in flexbox (without nth-child or js)
  • undefined reference to `SOIL_load_OGL_texture'?
  • How do I check if System::Collections:ArrayList is empty / nullptr / null?
  • converter json to two dimensional array
  • Find group of records that match multiple values
  • Simulate click Geckofx vb,net
  • How do I pass the string value parameter of the selected list item from an auto-populated dropdown l
  • Jquery UI tool tip close icon
  • Highlight and Bold text in JTextPane
  • MongoDB in PHP using aggregate to group by _id is null not working
  • Xamarin Forms - UWP Fonts
  • Sails.js/waterline: Executing waterline queries in toJSON function of a model?
  • Display issues when we change from one jquery mobile page to another in firefox
  • jQuery show() function is not executed in Safari if submit handler returns true
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Spray.io: When (not) to use non-blocking route handling?
  • HTML download movie download link
  • How to convert from System.Drawing.Color to Excel.ColorFormat in C#? Change comment color
  • Modifying destination and filename of gulp-svg-sprite
  • Updated Ionic CLI but shows previous version (Windows)
  • Redux, normalised entities and lodash merge
  • To display the title for the current loaction in map in iphone
  • Do create extension work in single-user mode in postgres?
  • GridView Sorting works once only
  • 0x202A in filename: Why?
  • Cannot Parse HTML Data Using Android / JSOUP
  • trying to dynamically update Highchart column chart but series undefined
  • Benchmarking RAM performance - UWP and C#
  • Java static initializers and reflection
  • Android Google Maps API OnLocationChanged only called once
  • How to get Windows thread pool to call class member function?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • unknown Exception android
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Unable to use reactive element in my shiny app
  • Conditional In-Line CSS for IE and Others?
  • java string with new operator and a literal