Swap Glyph on show

are you using jQuery?

onclick="showhide(this, 'targetDIVpane');

var showhide = function(sender, v_eleid){ 
  var o_ele = document.getElementById(v_eleid);
  if (o_ele) o_ele.style.display=="none"?"block":"none";
  if (sender) sender.style.display=="none"?"block":"none";
}

Select allOpen in new window

maybe  onclick="showhide('targetDIVpane','targetSwapGlyph-name');"

then hrm what for in the function

var showhide = function(targetDIVpane,targetSwapGlyph-name){ 
  var o_ele = document.getElementById(v_eleid); 
var c_glp = targetSwapGlyph-name;
  if (o_ele){ 
    if (o_ele.style.display == 'none'){ 
            if (targetSwapGlyph-name.string.matches == 'glyphicon-triangle-bottom'){ 
                glyphicon-triangle-top

            } else { 
               glyphicon-triangle-bottom
           }

      o_ele.style.display = 'block'; 
    } else { 
      o_ele.style.display = 'none'; 
    } 
  } 
}

Select allOpen in new window

I'm not entirely clear how you're using glyphs, because they're usually referenced as a class on an element and your example seems to be referencing a link's text attribute.
In any event, here's how you'd do it with the class assignment:

https://jsfiddle.net/zephyr_hex/rrnf1ep2/

HTML

<a href="#" class="showhide glyphicon glyphicon-edit"> Click Me</a>
<div id="targetDIVpane" style="display: none;"> content meat goes here </div>

Select allOpen in new window

jQuery

$(document).ready(function() {

  $('.showhide').on('click', function() {
   var link = $(this);

    var o_ele = document.getElementById('targetDIVpane');
    if (o_ele) {
      if (o_ele.style.display == 'none') {
        o_ele.style.display = 'block';
        link.removeClass('glyphicon-edit').addClass('glyphicon-eye-open');
      } else {
        o_ele.style.display = 'none';
        link.removeClass('glyphicon-eye-open').addClass('glyphicon-edit');
      }
    }
  });

});

Select allOpen in new window

Note:  I've moved your inline "onclick" to a class that's tied to a click event.  This follows the principal of "separation of concerns", where jQuery / JavaScript is de-coupled from HTML.  It makes for easier debugging and maintenance, and cleaner code.

trying to do a functional treatment to this http://v.widener.edu/sandbox/eventlistener/image_swap.htm

megan not sure ow you got the glyphs to show... theres no code behind shown on your jsfiddle...


what would I need on my page ? links to jquery  ?

The glyphs as related to Bootstrap and are triggered when you assign a class to an element.   There's no need for "code behind".  Bootstrap runs client side.
Assign a glyph class to your HTML element, and then remove that class and add a different glyph class when you're showing / hiding the div.  That's what my code is demonstrating.

sorry megan not connecting the dots something fundamental here is not clicking w/ me...
I copied /pasted even your code and its not working on my page pls advise

I don't know what else you have on your page.  Are you getting any errors in the console?

I assume you have linked jQuery in your page, as Bootstrap requires jQuery.
I also assume that you've changed your link element from using an inline onclick function call to a class that is bound by a click event.

ok translated...

use these lines of code
;$  could had save me 3 hours ... ugh meh
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

I just realized condensing the code snippet that its not scalar.. how do I pass any given targetDIVpane to the showhide script..
that capability seems to have been lost in your version.
pls advise Il continue to try to script out the parameter passing myself...

e.g. take

targetDIVpane and now pass it also as a target parameter


<a href="#" class="showhide targetDIVpane glyphicon glyphicon-collapse-down"> Click Me1</a>
<a href="#" class="showhide targetDIVpane2 glyphicon glyphicon-collapse-down"> Click Me2</a>

ok, what is your html for

[ bootstrap icon here]

try

var showhide = function(sender, v_eleid){ 
  var o_ele = document.getElementById(v_eleid);
  if (o_ele) o_ele.style.display=="none"?"block":"none";
  if (sender) $(sender).toggleClass("glyphicon-collapse-down").toggleClass("glyphicon-collapse-up");
}

Select allOpen in new window

actually, with jQuery

onclick="showhide(this, 'targetDIVpane');"

var showhide = function(sender, v_eleid){ 
  $("#" + v_eleid).toggle();
  $(sender).toggleClass("glyphicon-collapse-down").toggleClass("glyphicon-collapse-up");
}

Select allOpen in new window

@ Huseyin KAHRAMAN seems like you get what Im trying to do but I cant figure out how to call it...
pls advise

Is there some relationship between the link and the target div?  If so, you could use DOM navigation to find the target div when the link is clicked.
If there is no relationship, then I would use a data attribute on the link element which specifies its  target div.  You could then access the data attribute to get the target div
The data attribute would look like:

<a href="#" class="showhide glyphicon glyphicon-edit" data-target="targetDivId"> Click Me</a>

Select allOpen in new window

And then in jQuery, you can access it inside your click event function with:

var targetDiv = $(this).data('target');

Select allOpen in new window

look at this demo

https://jsfiddle.net/0nmLng25/

html

<a href="#" class="showhide glyphicon-collapse-up" targetdiv="divDetail1">detail 1</a>
<div id=divDetail1 class="detail">
  detail 1 detail 1 detail 1 detail 1
</div>
<br>
<a href="#" class="showhide glyphicon-collapse-up" targetdiv="divDetail2">detail 2</a>
<div id=divDetail2 class="detail">
  detail 1 detail 1 detail 1 detail 1
</div>

Select allOpen in new window

js

$("a.showhide").on("click", function() {

  $("#" + $(this).attr("targetdiv")).toggle();
  $(this).toggleClass("glyphicon-collapse-down").toggleClass("glyphicon-collapse-up");

});

Select allOpen in new window

ignore my css code, it is there just to see the change of class...

@Huseyin:

This is not a valid HTML attribute.  Custom attributes should use data attribute syntax.
targetdiv="divDetail1"

P.S.
I would prefer if you stopped hijacking my solutions and come up with your own ;)

I am not hijacking your solutions...
I used same classname and ids not to confuse...

and I dont care if they are valid or not "data attribute syntax", it is an attribute that can be retrieved by jQuery...

@Huseyin- I'm not going to argue.  I'd just like the courtesy that you stop using my solutions as a basis for your own suggestions.

And you should care about invalid HTML syntax.  Or at a minimum, not offer it as a solution because it doesn't follow standard HTML conventions.

@jandersonwidener
An HTML element should not have an attribute targetdiv="divDetail1".  It should be in the format of a data attribute (i.e.  data-target="divDetail1")

Moreover, if you have 100 target divs, using this convention does not scale.  DOM navigation / traversal (that I mentioned earlier) would be a more scale-able solution.

I should also mention that glyphicons should be in their own HTML element (for example, a span).  I'll go back and correct my fiddle later tonight when I have access to a computer again.

thx both soo much believe it or not I am learning a lot and what that does not work

agreed validity is a critical cornerstone for adoption and warrants sensitivity

@HK looking at https://jsfiddle.net/0nmLng25/ give me zero glyphs (see screenshot) pls advise


... it seems my biz reqs of scalability @HK ensures needs to meet glyph swap @ZHM got to function...
were almost out of the weeds... Ill continue to tinker pls lmk Megan when you have an idea for an update for me to try to incorporate..
trying to get my head wrapped around this all thx so much
many many thanks...

I used those css just to show class is changing...
when you use the code on your side, without my sample css, it should work, since you have actual css files for those, which add icons...

If you can provide the actual relationship between the link and the target div, I can provide a scale-able method for finding the target div based on the link's location.

In other words, where is the target div located in the HTML in relation to the link?

In the meantime, here's a corrected version of how to use glyphicons.  They should be in their own HTML element, and not sharing an HTML element like I had in my earlier example:

https://jsfiddle.net/zephyr_hex/rrnf1ep2/1/

HTML

<span class="glyphicon glyphicon-edit"><a href="#" class="showhide"> Click Me</a></span>
<div id="targetDIVpane" style="display: none;"> content meat goes here </div>

Select allOpen in new window

jQuery

$(document).ready(function() {

  $('.showhide').on('click', function() {
   //here is an example of DOM Traversal.  I'm locating the glyphicon that's related to the clicked link.
   var link = $(this).parent('span.glyphicon');

    var o_ele = document.getElementById('targetDIVpane');
    if (o_ele) {
      if (o_ele.style.display == 'none') {
        o_ele.style.display = 'block';
        link.removeClass('glyphicon-edit').addClass('glyphicon-eye-open');
      } else {
        o_ele.style.display = 'none';
        link.removeClass('glyphicon-eye-open').addClass('glyphicon-edit');
      }
    }
  });

});

Select allOpen in new window

P.S.  Bootstrap provides the glyphicons based on classes, like how I've shown in my example.  So you must have both Bootstrap and jQuery linked.  It doesn't make sense to use glyphicon as a class if you're not linking Bootstrap.  At a minimum, it's confusing.

http://glyphicons.bootstrapcheatsheets.com/

ok I dressed the event more @megan

>>provide the actual relationship between the link and the target div
>>where is the target div located in the HTML in relation to the link

not sure I follow you in order to explain scalar ... just that when one link I wanna open and one of these glypgs swap behaviors should trigger only themselves while yet another link box Id want to open just its own distinct second div of content...
there are about 15 Im hoping to have on the page... see my updated page...  http://v.widener.edu/sandbox/eventlistener/image_swap.htm

thx Ill get back to it when I can